当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react 中父组件与子组件双向绑定问题

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

2019年07月20日  | 移动技术网IT编程  | 我要评论

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

首先，先把在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 中父组件与子组件双向绑定问题，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网