react input状态绑定

React中input双向绑定实战：value与onChange的巧妙结合

最新推荐文章于 2024-05-10 19:54:10 发布

原创最新推荐文章于 2024-05-10 19:54:10 发布 · 987 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

11 篇文章

订阅专栏

本文详细讲解了如何在React中实现input元素的value属性与state的双向绑定，包括使用value直接绑定静态值的问题，以及通过onChange事件监听输入变化并实时更新state的方法。

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