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

时间:2022-06-15 12:02:15
  • 实现联动绑定,在文本框中输入内容的同时,后面的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
);