React第八讲课堂笔记（表单操作）

1. React表单组件和 html 的不同点

  • value/checked 属性设置后，用户输入无效
  • textarea 的值要设置在 value 属性
1
<textarea name="description" value="This is a description." />
  • select 的 value 属性可以是数组，不建议使用 option 的 selected 属性
1
2
3
4
5
<select multiple={true} value={['B', 'C']}>
   <option value="A">Apple</option>
   <option value="B">Banana</option>
   <option value="C">Cranberry</option>
 </select>
  • input/textarea 的 onChange 用户每次输入都会触发（即使不失去焦点）
  • radio/checkbox/option 点击后触发 onChange

2. 综合表达组件示例

  1. 定义复选框组件Checkboxes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import React, { Component } from 'react';

    class Checkboxes extends Component {
      render(){
          return <span>
              A
              <input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="A"/>
              B
              <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" />
              C
              <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" />
          </span>
      }
    }

    export default Checkboxes;

  2. 定义单选框按钮组RadioButtons

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    import React, { Component } from 'react';

    class RadioButtons extends Component {
      saySomething(){
          alert("我是一个很棒的单选框按钮组");
      }
      render(){
          return <span>
              A
              <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
              B
              <input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/>
              C
              <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
          </span>
      }
    }

    export default RadioButtons;

  3. FormApp组件集成两个组件并处理表单逻辑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    'use strict';

    import React, { Component } from 'react';
    import Checkboxes from './Checkboxes';
    import RadioButtons from './RadioButtons';

    class FormApp extends Component {

      state = {
          inputValue: '请输入...',
          selectValue: 'A',
          radioValue:'B',
          checkValues:[],
          textareaValue:'请输入...'
      }

      handleSubmit = (e) => {
          e.preventDefault();

          let formData = {
              input: this.refs.goodInput.value,
              select: this.refs.goodSelect.value,
              textarea: this.refs.goodTextarea.value,
              radio: this.state.radioValue,
              check: this.state.checkValues,
          }

          alert('您即将提交表单')
          console.log('你提交的数据是:')
          console.log(formData);

      }

      handleRadio = (e) => {
          this.setState({
              radioValue: e.target.value,
          })
      }

      handleCheck = (e) => {
          let checkValues = this.state.checkValues.slice();
          let newVal = e.target.value;
          let index = checkValues.indexOf(newVal);

          if( index == -1 ){
              checkValues.push( newVal )
          }else{
              checkValues.splice(index,1);
          }

          this.setState({
              checkValues: checkValues,
          })
      }

      render(){
          return <form onSubmit={this.handleSubmit}>
              <h3> 请输入内容 </h3>
              <input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>
              <br/>

              <h3> 请选择 </h3>
              <select defaultValue={ this.state.selectValue } ref="goodSelect">
                  <option value="A">A</option>
                  <option value="B">B</option>
                  <option value="C">C</option>
                  <option value="D">D</option>
                  <option value="E">E</option>
              </select>
              <br/>

              <h3> 单项选择 </h3>
              <RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
              <br/>

              <h3> 多选按钮 </h3>
              <Checkboxes handleCheck={this.handleCheck} />
              <br/>

              <h3> 反馈建议 </h3>
              <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
              <br/>

              <button type="submit">确认提交</button>
          </form>
      }
    }

    export default FormApp;