react 学习笔记（五）：表单

React 中有约束性组件和非约束性组件

• 非约束性组件：使用 defaultValue 代表组件的值，react 不会管理该组件的输入过程
• 约束性组件：使用 value 代表组件的值，这个值不是写死的内容，需要给这个组件绑定 onChange 事件来管理这个组件的输入

主要了解各种表单控件如何作为约束性组件在 react 中进行管理, 完整例子附在最下方

1. text
   将 value 属性绑定为组件的某个数据，如 例子中的{this.state.name}, 当 name 值改变时，这个控件的 value 也会随之更新。绑定了一个动态的 value 值，就需要为它设置 onChange 事件，当该控件的内容发生改变时，就会触发 onChange 事件，在该事件中为 state 中的 name 字段重新赋值，从而改变该控件的 value 值，实现双向数据绑定

2. radio
   在 react 中，我们不通过 name 属性来为单选框分组，我们通过进行一个等值判断来实现单选框的效果，如例子中 checked={this.state.sex === "1"}, 当指定值为 1 时，为选中状态，而不为 1 时，则为非选中状态。onChange 对应的事件用于将指定值设置为当前点击的选项的 value 值。

3. select
   select 需要配合 option 显示选项，我们将 option 的内容以数组的形式保存在了 state 中，同时也保存了当前对应的选项，例子中的 citys 就是所有的选项，city 就是当前选定的选项。当选择发生改变时，我们只需要将当前的选项的值赋值给 city 就行。

4. checkBox
   checkBox 是多选框，我们同样将每个选项以数组的形式保存起来，每个选项保存选项内容的同时也需要保存选中状态。因为多选每个控件都有自己独立的状态，不再是操作单个控件，对应的 onChange 事件的写法也有所不同，需要判断一下是哪个选项的状态发生了改变，我们可以通过传入参数来判断，如例子中，将 key 作为参数来修改对应的选项的状态（key 为索引值）。需要注意的一点是 this 指向问题，可以像例子中通过箭头函数确保 this 仍然指向整个组件，可以访问到指定的函数。

5. textArea
   textArea 在 react 中与原本的写法有些不同, 值是直接写在 value 中的，所以用法和上面的 <input type='text'>控件的用法是类似的。

import React, { Component } from 'react';

class ReactForm extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      'name' : '',
      'sex' : '1',
      'city':'北京',
      'citys' : [
        '北京','上海','深圳'
      ],
      'hobby' : [
        {
          'title' : '睡觉',
          'checked' : false,
        },
        {
          'title' : '吃饭',
          'checked' : false,
        },        {
          'title' : '敲代码',
          'checked' : true,
        },
      ],
      'info':''
     };
  }
  handleSubmit = (e)=>{
    e.preventDefault();
    console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby);
  }
  handleName = (e)=>{
    this.setState({
      'name': e.target.value
    })
  }
  handleSex = (e)=>{
    this.setState({
      'sex' : e.target.value
    })
  }
  handleCity = (e)=>{
    this.setState({
      'city' : e.target.value
    })
  }
  handleHobby = (key)=>{
    let hobby = this.state.hobby;
    hobby[key].checked = !hobby[key].checked;
    this.setState({
      hobby : hobby
    })
  }
  handleInfo = (e)=>{
    this.setState({
      'info' : e.target.value
    })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          用户名：<input type="text" value={this.state.name} onChange={this.handleName}/>
          <br/>
          性别： <input type="radio" value="1" onChange = {this.handleSex} checked={this.state.sex === "1"}/>男
                <input type="radio" value="2" onChange = {this.handleSex} checked={this.state.sex === "2"}/>女<br/>
          居住城市：
          <select value = {this.state.city} onChange={this.handleCity}>
            {
              this.state.citys.map(function(value,key){
                return <option key={key}>{value}</option>
              })
            }
          </select><br/>
          爱好:
          {
            this.state.hobby.map((value,key)=>{
              return (<div>{value.title}<input type="checkBox" checked={value.checked} onChange={this.handleHobby.bind(this,key)}/></div>)
            })
          }
          <br/>
          简介：<textarea value={this.state.info} onChange={this.handleInfo}/><br/>
          <input type="submit" value="提交"/>

        </form>
      </div>
    );
  }
}

export default ReactForm;