来源：https://blog.csdn.net/function__/article/details/72357251
一、表单组件（约束性组件和非约束性组件）
1、约束性组件，由React管理它的value。下面这个value属性由 this.state.name，进而由 this.handleChange 负责管理的。实际上 input 的 value 不是用户输入的内容。而是onChange 事件触发之后，由 this.setState 决定。约束性组件显示的值和用户输入的值虽然很多时候是相同的，但他们是两码事。约束性组件显示的是 this.state.name 的值。你可以在handleChange中对用户输入的值做任意的处理，比如你可以做错误校验。
```javascript
<input type="text" value={this.state.name} onChange={this.handleChange} />
//...省略部分代码
handleChange: function(e) {
    this.setState({name: e.target.value});
}
```
2、非约束性组件，由原生DOM管理它的value。下面这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。
```html
<input type="text" defaultValue="a" />
```
3、对比约束性组件和非约束性组件的输入流程：
非约束性组件： 用户输入A -> input 中显示A
约束性组件： 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A

4、React 把 input,textarea 和 select 三个组件做了抽象和封装，他们有统一的 value 属性 和 onChange 事件。
```javascript
<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} />
```
5、checkbox改变的不是 value ，而是 checked 状态。
```javascript
<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' />
```
6、一个示例。下面是一个包含了 input,textarea, select, radio 的表单，并且做了简单的校验：
```javascript
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.!#$%&'*+\/=?^_`{|}~-]*$/.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")
);
```