react input状态绑定

input输入框与React的state双向绑定

input 的 value事件函数 绑定 this.state.info (单向流绑定)

<input type="text" value={this.state.info}>  //此时输入框为read-only状态，
                                         //输入内容会报错。需要添加onChange事件函数 或者 添加属性 readOnly

input 的 onChange事件函数

传入事件函数event，

监听event.target.value的改变，

拿到改变值，

通过this.setState({ }),同步到 this.state.info，形成双向绑定

<input type="text" value={this.state.info} onChange={(event) => {this.inputChange(event)}}> 
    inputChange(event) {
        const newValue = event.target.value
        this.setState({
            info: newValue
        })
        
    }