【学】React的学习之旅4-添加事件(onChange)

• 实现联动绑定，在文本框中输入内容的同时，后面的span里内容跟着一起变化；
• onChange()，一旦触发一次变动，就执行某个函数；
• 既然已经在getInitialState属性里申明了一个变量inputContent来赋值给span标签的内容，那在onChange函数中就可以修改state中inputContent的值

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
);