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


Posted in Javascript onMay 20, 2019

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

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 中父组件与子组件双向绑定问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Jquery 绑定时间实现代码
May 03 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript中常用编程知识
Apr 08 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JS实现旋转木马轮播图
Jan 01 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 #Javascript
一文搞懂ES6中的Map和Set
May 20 #Javascript
详解vue 在移动端体验上的优化解决方案
May 20 #Javascript
vue-i18n结合Element-ui的配置方法
May 20 #Javascript
JS实现选项卡效果的代码实例
May 20 #Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 #Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
ES5学习教程之Array对象
2017/04/01 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python 查看文件的读写权限方法
2018/01/23 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 如何对logging日志封装
2020/12/02 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
通信生自我鉴定
2014/01/18 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
办公室副主任职责范本
2014/03/08 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
争先创优个人总结
2015/03/04 职场文书
单位车辆管理制度
2015/08/05 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python