react input状态绑定

阅读 69

2022-02-22

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
        })
        
    }

精彩评论(0)

0 0 举报