React学习1-7受控组件DOM操作-input双向数据绑定示例

最新推荐文章于 2022-11-07 15:36:40 发布

菜鸟圈大当家

最新推荐文章于 2022-11-07 15:36:40 发布

阅读量163

点赞数

分类专栏： React

本文链接：https://blog.youkuaiyun.com/m0_37780367/article/details/106123443

版权

React 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了React中受控组件的概念与实现方式，通过一个简单的输入框示例，展示了如何使用state和setState来控制组件的状态，从而实现数据的双向绑定。

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

受控组件：受状态控制
非受控组件：不受状态控制

import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Input extends Component{

  constructor(){
    super();
    this.state = {val:''}
  }
  handleChange = (event) => {
    let value = event.target.value;
    this.setState({val:value})
  }
  render(){
    return (
      <div>
        <p>{this.state.val}</p>
        <input type="text" onChange={this.handleChange} value={this.state.val}/>
      </div>
    )
  }
}

ReactDOM.render(<Input/>,document.querySelector('#root'))