事件处理
React中的事件名称,组件中包含一个button,给button绑定onClick事件
定义一个组件:button 给button绑定onClick事件
var MyButton = React.createClass({ handleClick:function () { alert("点击按钮触发的效果"); }, render:function () { return( <button onClick={this.handleClick}>{this.props.buttonTitle}</button> ); } }); ReactDOM.render( <MyButton buttonTitle="button"/>, document.getElementById("container") );
state 状态
props 组件自身的属性
var CheckButton = React.createClass({ getInitialState:function () { return{ isCheck:false } }, handleChange:function () { this.setState({ isCheck:!this.state.isCheck }); }, render:function () { //在jsx语法中,不能直接使用if,使用三目运算符 var text = this.state.isCheck ? "yes" : "no"; return( <div> <input type="checkbox" onChange={this.handleChange} /> {text} </div> ); } }); ReactDOM.render( <CheckButton />, document.getElementById("container") ); //当state发生变化时,会调用组件内部的render方法