表单组件支持几个受用户交互影响的属性：
-
value，用于<input>、<textarea>组件。 -
checked，用于类型为checkbox或者radio的<input>组件。 -
selected，用于<option>组件。
在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。
表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：
-
<input>或<textarea>的value发生变化时。 -
<input>的checked状态改变时。 -
<option>的selected状态改变时。
和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件
受限组件：你修改之后不起作用需要通过oncahnge来响应
input textarea select是一样的
var Hello = React.createClass({
render:function(){
return(
<input type="text" value="Hello" />
);
}
});
ReactDOM.render(
< Hello />,document.getElementById('example')
)
不起作用的：需要改成
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return <input type="text" value={this.state.value} onChange={this.handleChange} />;
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return <textarea type="text" value={this.state.value} onChange={this.handleChange} />;
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'bj'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (<select id="city" name="city" value={this.state.value} onChange={this.handleChange} >
<option value='bj'>北京</option>
<option value='sh'>上海</option>
<option value='tj'>天津</option>
</select>
);
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {male: true};
},
handleGender: function(e) {
var male = !!(e.target.value == 'MALE');
this.setState({
male: male
});
},
render: function() {
return (
<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' />
);
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>