React：表单组件（受控组件）

表单组件

在HTML中，表单元素与其他元素最大的不同是它自带值或数据，而且在我们的应用中，只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理。

在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到受控组件与非受控组件这两个概念。

React推荐我们在绝大多数情况下都使用受控组件。这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数据。

（1）受控组件与非受控组件

大致可分为两类：

• 受控组件：一般涉及到表单元素时我们才会使用这种分类方法。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。

• 非受控组件：类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

受控组件简单来说就是它的值由React进行管理，而非受控组件的值则由原生DOM进行管理。示例如下：

//受控组件(省略部分代码)
<input type='text' value={this.state.value} onChange={this.handleChange}/>
​
handleChange(event) {
    this.setState({value: event.target.value});
}
​
​
//非受控组件
<input type="text" defaultValue="hello!"/>

 

 

（2）更多受控组件

在组件中声明表单元素（input_type/checked textarea select ……）时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            gender: ''
        };
        this.handleGender = this.handleGender.bind(this);
    }
    handleGender(event) {
        this.setState({gender: event.target.value});
    }
​
    render() {
        return (
            <div>
                <h2>input_checked 受控组件</h2>
                <input type='radio' value="man" checked={this.state.gender=='man'} onChange={this.handleGender}/>男<br />
                <input type='radio' value="woman" checked={this.state.gender=='woman'} onChange={this.handleGender}/>女<br />
                <div>{this.state.gender}</div>
                
            </div>
        );
    }
}
​
ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);