第六讲 React中State的监听与事件
1、先来一个按钮事件的基本实现；1.1、自定义一个MyButton组件，类似前面一讲提到的验证与默认值，在createClass参数对象中，添加一个事件的实现即可
// 在此处编写React代码
var MyButton = React.createClass({
// 自定义对象绑定事件
handleClick:function(){
alert("按钮被点击！");
},
render:function(){
// buttonTitle的基本的属性
return <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
}
});
1.2、渲染该组件即可得到想要的效果
ReactDOM.render(
<MyButton buttonTitle = "按钮"/>,
document.getElementById("container")
);
1.3、效果展示：http://www.yusian.com/react/state/event_demo.html
2、状态的监听通过同样的方式实现；
2.1、三个基本步骤：第一、初始化状态值(定义自定义状态)；第二、自定义事件及实现；第三、渲染中引用；
2.2、基本代码示例
var MyCheckBox = React.createClass({
// 初始化State属性，isCheck为自定义的状态
getInitialState:function(){
return{
isChecked : false
}
},
handleClick:function(){
// this.state.isCheck = !this.state.isCheck;
// 调用setState方法默认会重新渲染，直接对某个状态赋值则不会
this.setState({
isChecked:!this.state.isChecked
})
},
render:function(){
// 首先定义文本的值，文本会根据状态的不同而显示不同的文字；
var text = this.state.isChecked ? "已选中" : "未选中";
return (
<div>
<input type="checkbox" onChange={this.handleClick} /> {text}
</div>
)
}
});
2.3、效果示例：http://www.yusian.com/react/state/state_demo.html 内容也可以被监听：
/**
* 需要：将用户在输入框中输入的值实时显示；
* 分析：input中接收实时输入的值，用文本标签实时显示
*/
var SAInput = React.createClass({
// 初始化状态，状态可以是任意类型的属性
getInitialState:function(){
return {
value : "请输入"
}
},
// 事件处理，调用this.setState()方法能实时刷新页面
handleChange:function(event){
this.setState({
value : event.target.value
})
},
// 组件包含一个input和p标签，一个输入一个同步显示
render:function(){
var text = this.state.value;
return (
<div>
<input type="text" value={text} onChange={this.handleChange} />
<p>{text}</p>
</div>
)
}
});
ReactDOM.render(
<SAInput />,
document.getElementById("container")
);
效果演示：http://www.yusian.com/react/state/form_demo.html
页:
[1]