|
在react中实现一个简单双向数据绑定
参考：http://bugshouji.com/bbs-read-run?tid=1242 如果一个页面表单元素太多，每一个写一个change对应的事件处理方法，重复代码太多，你会发现不同的元素，事件处理程序，只是setState对应的键名不同，那可以考虑封装？[/p][p]思路：全都用一个事件处理程序，传不同的值进去就好了 代码如下： constructor(){
super()
this.changeHandle = this.changeHandle.bind(this);
this.state={
name:"",
pwd:"",
email:""
}
}render(){
let {name,pwd,email} = this.state;
return (
<div>
<input data-key="name" onChange={this.changeHandle} value={name} type="text" />
<input data-key="pwd" onChange={this.changeHandle} value={pwd} type="text" />
<input data-key="email" onChange={this.changeHandle } value={email} type="text"/>
<span>name:{name}</span>
<span>pwd:{pwd}</span>
<span>email:{email}</span>
</div>
)
}changeHandle(e){
e.preventDefault()
let key = e.target.dataset.key;
this.setState({[key]:e.target.value})
} |
|
|
公众号
