欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

react 中父组件与子组件双向绑定问题

程序员文章站 2024-02-09 16:23:46
在项目中我们可能会遇到类似这样的场景，也就是父子组件的双向数据绑定 首先，先把在head中引入react.js、react-dom.js和可选择的babel.js(这...

在项目中我们可能会遇到类似这样的场景，也就是父子组件的双向数据绑定

react 中父组件与子组件双向绑定问题

首先，先把在head中引入react.js、react-dom.js和可选择的babel.js(这里需要注意引用的顺序，react.js必须在react-dom.js之前)

<head>
  <script src="react.js"></script>
  <script src="react-dom.js"></script>
  <script src="babel.js"></script>
</head>

 在body里新建一个挂载点

<body>
  <div id='app'></div>
</body>

然后就可以开始写jsx了，注意script标签需注明type类型为"text/babel"或"text/jsx"

<script tpye='text/babel'>
//父组件
  class father extends react.component {
    constructor(props) {
      super(props)
      this.state = {
        fname: '父组件',
        fage: 18,
        key: '' 
      };
    }
    setfname(event) {
      this.setstate({fname: event.target.value, key: event.target.value});  //设置fname值为input的value值；key用来监听值是否变化 
} setfage(event) { this.setstate({fage: event.target.value, key: event.target.value}) } todata(data) { this.setstate({fname: data.name}); this.setstate({fage: data.age}); } render() { return ( <div> <table border="1" cellspacing="0"> <tbody> <tr> <th colspan="3">父组件数据</th> </tr> <tr> <td>name</td> <td>{this.state.namefvalue}</td> <td><input value={this.state.fname} onchange={this.setfname.bind(this)}/></td> //受控组件当input值改变时触发方法setfname </tr> <tr> <td>age</td> <td>{this.state.agefvalue}</td> <td><input value={this.state.fage} onchange={this.setfage.bind(this)}/></td> </tr> </tbody> </table><br>           <br>           //子组件标签里将父组件的数据传递给子组件，在子组件里利用props接收；key值变化时，子组件数据更新
          <son key={this.state.key} fname={this.state.fname} fage={this.state.fage} todata={this.todata.bind(this)}></son>  
        </div>
      )
    }
  }<br><br><br> //子组件<br><br> 
class son extends react.component {
  constructor(props) {
    super(props)
    this.state = {
      svname: this.props.fname, //将父组件传下来的值赋给svname
      svage: this.props.fage  
    }
  }
  svname(ev) {
    console.log(ev.target)
    this.setstate({
      svname: ev.target.value
    })
  }
  svage(ev) {
    this.setstate({
      svage: ev.target.value
    })
  }
  todata(data) {
    // console.log(svname)
    this.props.todata(data)
  }
  render() {
    return (
      <div>
        <button onclick={this.todata.bind(this, {name: this.state.svname, age: this.state.svage})}>点我传值
        </button>
        <table border="1" cellspacing="0">
          <tbody>
          <tr>
            <th colspan="3">子组件数据</th>
          </tr>
          <tr>
            <td>name</td>
            <td>{this.state.svname}</td>
            <td><input value={this.state.svname} onchange={this.svname.bind(this)}/></td>
          </tr>
          <tr>
            <td>age</td>
            <td>{this.state.svage}</td>
            <td><input value={this.state.svage} onchange={this.svage.bind(this)}/></td>
          </tr>
          </tbody>
        </table>
      </div>

    )
  }
}
</script>

总结

以上所述是小编给大家介绍的react 中父组件与子组件双向绑定问题，希望对大家有所帮助

上一篇： 现在什么游戏能赚钱，网络赚钱的方法大全！

下一篇： 一本大学在安徽录取分数线2021年参考（一本、二本高考招生分数排名）

推荐阅读