zoukankan      html  css  js  c++  java
  • 【学】React的学习之旅4-添加事件(onChange)

    • 实现联动绑定,在文本框中输入内容的同时,后面的span里内容跟着一起变化;
    • onChange(),一旦触发一次变动,就执行某个函数;
    • 既然已经在getInitialState属性里申明了一个变量inputContent来赋值给span标签的内容,那在onChange函数中就可以修改stateinputContent的值
    var TextInput = React.createClass({
        //给input组件赋值一个初始化的state,用来存储用户输入的内容
        getInitialState:function(){
            return {
                inputContent:'请输入内容' //申明一个变量inputContent,初始化值为空
            };
        },
        
        inputHandler: function(ev){ //通过设置组件的state,来修改相应span里的显示
            this.setState({ //记住要设置状态要用组件实例的setState方法,这里的ev.target是文本框,是事件的触发对象,然后inputContent状态属性的值赋值为当前输入框里的内容
                inputContent: ev.target.value
            });
            ev.stopPropagation();
            ev.preventDefault();
        },
        render: function(){
            return (
            //这里的span里内容设置为state.下的自己申明的变量inputContent,初始化时为空'',但是会随着文本框里内容的改变而跟着改变
                <div>
                    <input onChange={this.inputHandler} type="text" />
                    <span>{this.state.inputContent}</span>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <TextInput />,
        oWrap
    );
    
  • 相关阅读:
    repr() Vs str()
    默认参数
    元组
    字典
    电脑可以办的两类最基本的事情
    代码块
    变量名
    print的逻辑
    input的逻辑
    让python2听懂中文
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5801077.html
Copyright © 2011-2022 走看看