react input状态绑定

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

在座的各位都是菜杯

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

阅读量929

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/coderYYA/article/details/123078289

版权

react 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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