表单是前端异常重要的一块内容，而且每每包含了毛病校验等逻辑。
React对表单元素做了特地的优化处置惩罚，他对表单元素做了一些笼统，使得他们的运用体式格局更一致更范例。

束缚性和非束缚性组件

表单内里出来了一个新的观点叫“束缚性组件”。那末怎样明白束缚性组件和非束缚性组件呢。

束缚性组件，简朴的说，就是由React治理了它的value，而非束缚性组件的value就是原生的DOM治理的。
他们的写法上也有很大区分。

非束缚性组件这么写：

<input type="text" defaultValue="a" />

这个 defaultValue 实在就是原生DOM中的 value 属性。如许写出的来的组件，其value值就是用户输入的内容，React完整不治理输入的历程。

而束缚性组件是这么写的：

<input type="text" value={this.state.name} onChange={this.handleChange} />

//...省略部份代码
handleChange: function(e) {
  this.setState({name: e.target.value});
}

这里，value属性不再是一个写死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 担任治理的。
这个时刻现实上 input 的 value 基础不是用户输入的内容。而是onChange 事宜触发以后，由于 this.setState 致使了一次从新衬着。不过React会优化这个衬着历程，现实它依然是经由过程设置input的value来完成的。

然则肯定要注意，束缚性组件显现的值和用户输入的值虽然许多时刻是雷同的，但他们基础是两回事。束缚性组件显现的是 this.state.name 的值。你能够在handleChange中对用户输入的值做恣意的处置惩罚，比方你能够做毛病校验。

对照束缚性组件和非束缚性组件的输入流程：

非束缚性组件： 用户输入A -> input 中显现A
束缚性组件： 用户输入A -> 触发onChange事宜 -> handleChange 中设置 state.name = “A” -> 衬着input使他的value变成A
正式由于如许，强烈推荐运用束缚性组件，由于它能更好的掌握组件的性命流程。

更一致和更范例的接口

React 把 input,textarea 和 select 三个组件做了笼统和封装，他们的用法变得异常一致，你基本上能够当作同一个组件来用。

他们如今有一致的 value 属性 和 onChange 事宜，如今关于这三种组件你都能够如许写

<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} />
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />

不过 chekbox有和上面三个不一样，由于checkbox转变的不是 value ，而是 checked 状况。
你能够如许写：

<input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />
<input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />

一个示例

下面是一个包含了 input,textarea, select, radio 的表单，而且做了简朴的校验：

  var MyForm = React.createClass({
    getInitialState: function() {
      return {
        email: "",
        intro: "",
        city: "hz",
        male: true, //性别
        emailError: "",
        introError: ""
      };
    },
    handleEmail: function(e) {
      var value = e.target.value;
      var error = '';
      if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
        error = '请输入准确的Email';
      }
      this.setState({
        email: value,
        emailError: error
      });
    },
    handleIntro: function(e) {
      var value = e.target.value;
      var error = "";
      if(value.length < 10) {
        error = "引见不能少于十个字";
      }
      this.setState({
        intro: value,
        introError: error
      });
    },
    handleCity: function(e) {
      var value = e.target.value;
      this.setState({
        city: value,
      });
    },
    handleGender: function(e) {
      var male = !!(e.target.value == 'MALE');
      this.setState({
        male: male
      });
    },
    render: function() {
      return (
        <div>
        <p>
          <label htmlFor='email'>email:</label>
          <input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} />
          <span>{this.state.emailError}</span>
        </p>
        <p>
          <label htmlFor='intro'>intro:</label>
          <textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
          <span>{this.state.introError}</span>
        </p>
        <p>
          <label htmlFor='city'>所在城市:</label>
          <select  name='city' id='city' value={this.state.city} onChange={this.handleCity}>
            <option value='hz'>杭州</option>
            <option value='bj'>北京</option>
            <option value='sh'>上海</option>
          </select>
        </p>
        <p>
          <label>性别:</label>
          <input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />
          <input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />
        </p>
        </div>
        )
    }
  });

  React.render(
    <MyForm />,
    document.getElementById("div1")
    );