首页 > 代码库 > ReactNative--state

ReactNative--state

2024-09-05 09:56:28   218人阅读

事件处理

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方法

 

ReactNative--state


联系
我们