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

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

• value/checked 属性设置后，用户输入无效
• textarea 的值要设置在 value 属性

<textarea name="description" value="This is a description." />

• select 的 value 属性可以是数组，不建议使用 option 的 selected 属性

<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 ``` import React, { Component } from 'react';

class Checkboxes extends Component { render(){ return A B C } }

export default Checkboxes;

2. 定义单选框按钮组RadioButtons

import React, { Component } from 'react';

class RadioButtons extends Component { saySomething(){ alert("我是一个很棒的单选框按钮组"); } render(){ return A B C } }

export default RadioButtons;

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

'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

      <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;

```