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 相关文章推荐
JS随即打乱数组实现代码
Dec 03 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
js中less常用的方法小结
2017/08/09 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
pygame实现打字游戏
2021/02/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python实现简单颜色识别程序
2020/02/19 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
机械工程及其自动化专业求职信
2014/08/08 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
初中美术教学反思
2016/02/17 职场文书
详解MySQL的半同步
2021/04/22 MySQL