第六讲 React中State的监听与事件

Sian

1、先来一个按钮事件的基本实现；
1.1、自定义一个MyButton组件，类似前面一讲提到的验证与默认值，在createClass参数对象中，添加一个事件的实现即可

[JavaScript] 纯文本查看 复制代码

    // 在此处编写React代码
    var MyButton = React.createClass({
      // 自定义对象绑定事件
      handleClick:function(){
        alert("按钮被点击！");
      },
      render:function(){
        // buttonTitle的基本的属性
        return <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
      }
    });

1.2、渲染该组件即可得到想要的效果

[JavaScript] 纯文本查看 复制代码

    ReactDOM.render(
      <MyButton buttonTitle = "按钮"/>,
      document.getElementById("container")
    );

1.3、效果展示：http://www.yusian.com/react/state/event_demo.html

2、状态的监听通过同样的方式实现；
2.1、三个基本步骤：第一、初始化状态值(定义自定义状态)；第二、自定义事件及实现；第三、渲染中引用；
2.2、基本代码示例

[JavaScript] 纯文本查看 复制代码

    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

Sian

内容也可以被监听：

[JavaScript] 纯文本查看 复制代码

/**
     * 需要：将用户在输入框中输入的值实时显示；
     * 分析：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