iOS开发笔记 一天到晚游泳的余

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 496|回复: 1

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

[复制链接]
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

    发表于 2017-12-25 17:39:44 | 显示全部楼层 |阅读模式
    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
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

     楼主| 发表于 2017-12-25 18:01:15 | 显示全部楼层
    内容也可以被监听:
    [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
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2020-8-15 21:32 , Processed in 0.197405 second(s), 19 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表