九、表单
最后更新于：2022-04-01 03:42:25
## 九、表单
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 [demo9](https://github.com/ruanyf/react-demos/blob/master/demo09/index.html) ）。
> ~~~
> var Input = React.createClass({
> getInitialState: function() {
> return {value: 'Hello!'};
> },
> handleChange: function(event) {
> this.setState({value: event.target.value});
> },
> render: function () {
> var value = this.state.value;
> return (
> <div>
> <input type="text" value={value} onChange={this.handleChange} />
> <p>{value}</p>
> </div>
> );
> }
> });
>
> React.render(<Input/>, document.body);
> ~~~
上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考[官方文档](http://facebook.github.io/react/docs/forms.html)。