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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python实现数字的格式化输出
2020/08/01 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
北承题目(C++)
2012/05/16 面试题
财务会计实习报告体会
2013/12/20 职场文书
初一体育教学反思
2014/01/29 职场文书
环保倡议书
2014/04/14 职场文书
应届生求职信范文
2014/06/30 职场文书
先进个人申报材料
2014/12/30 职场文书
辛亥革命观后感
2015/06/02 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
tree shaking对打包体积优化及作用
2022/07/07 Java/Android