react中实现数据双向绑定

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})
          }
     }
 }
 //这个方法可以让多个数据进行双向绑定