react中实现数据双向绑定
vue实现双向数据绑定v-module就可以,但是react没有,我们使用event.target事件对象来更新react中的数据状态首先初始化状态this.state={"username":""}给输入框添加onChange事件<input type="text"onChange={this.handleChange}
·
vue实现双向数据绑定v-module就可以,但是react没有,我们使用event.target事件对象来更新react中的数据状态
首先初始化状态
this.state={"username":""}
给输入框添加onChange事件
<input type="text" onChange={this.handleChange} />
<p>{this.state.username}</p>
编写事件代码
handleChange = (event) => {
this.setState({
username: event.target.value
})
}
这样在输入框中输入时数据也跟着在变
如果双向数据绑定的值过多,可以使用下面这种方法
// 初始化数据
this.state = {
form: {
invite: '',
nickname: '',
username: '',
password: ''
},
}
// 给输入框绑定事件
<input type="text" onChange={this.handleChange.bind(this, 'invite')}/>
<input type="text" onChange={this.handleChange.bind(this, 'nickname')}/>
<input type="text" onChange={this.handleChange.bind(this, 'username')}/>
<input type="text" onChange={this.handleChange.bind(this, 'password')}/>
// 编写事件方法
handleChange = (key, event) => {
let form = this.state.form
for (let item in this.state.form) {
if (item === key) {
form[item] = event.target.value
this.setState({form: form})
}
}
}
//这个方法可以让多个数据进行双向绑定
更多推荐
已为社区贡献12条内容
所有评论(0)