React中的双向绑定简易实现

最新推荐文章于 2024-03-07 11:11:13 发布

xunfengZ

最新推荐文章于 2024-03-07 11:11:13 发布

阅读量278

点赞数

分类专栏： react 文章标签： react javascript reactjs

本文链接：https://blog.youkuaiyun.com/xunfengZ/article/details/110941119

版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在React中实现简单的双向数据绑定。通过示例代码，展示了如何将组件的输入值与状态同步，以实现更加动态的用户界面交互。

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

实现效果如下：
在这里插入图片描述
简易代码如下

class App extends Component{
  constructor(){
    super()
    this.state={
      xing:'',
      ming:''
    }
  }
  //方法
  handleInputChange=(e)=>{//这里如果不用箭头函数的话，this就不指向组件了，需要注意
    console.log(e.target);   //表示是 当前的dom对象 input
    console.log(e.target.name);  //xing
    console.log(e.target.value); //ming
    this.setState({
      [e.target.name]:e.target.value    //前面是this.setState这个对象中的key  数组表示的是这个key一个变量 
    })
  }

  //render
  render(){
    const {xing,ming}=this.state  //解构赋值 不使用也可以，不过后续使用的前缀要加this.state
    return (
      <div>
        {/* 姓 */}
        <label>
          <span>姓：</span>
          <input type="text" name="xing" value={xing} onChange={this.handleInputChange}></input>
        </label>
        {/* 名 */}
        <label>
          <span>名：</span>
          <input type="text" name="ming" value={ming} onChange={this.handleInputChange}></input>
        </label>
    <p>欢迎：{xing}{ming}</p>
      </div>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.querySelector("#root")
)