react ---- 表单与事件

1.需要引入的文件：

        <script src='react.js'></script>
<script src='react-dom.js'></script>

<script src='babel.min.js'></script>

2.代码：

<div id='example'></div>

<script type='text/babel'>
var Hello = React.createClass({
/*设置初始状态*/
getInitialState:function(){
return {
message:'hello world！'
}
},
/*定义一个事件处理函数*/
handleChange:function(event){
/*event对象*/
/*改变状态*/
/*setState的参数为一个对象*/
this.setState({
message:event.target.value
});
},
/*定义一个组件*/
render:function(){
return (
<div>
{/*在react里事件名为驼峰式*/}
<input type="text" value={this.state.message} onChange={this.handleChange} />
{/*在react中对change方法做了改进，只要输入框中内容改变就会触发change事件
而在JS中则需要内容改变且失去焦点时才可以触发*/}
<h4>{this.state.message}</h4>
</div>
);
}
});
/*渲染组件*/
ReactDOM.render(
<Hello />,
document.getElementById('example')
);
</script>