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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
node.js中 stream使用教程
Aug 28 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
vue实现前端列表多条件筛选
Oct 26 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
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
完美的php分页类
2017/10/24 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python heapq使用详解及实例代码
2017/01/25 Python
浅谈Python处理PDF的方法
2017/11/10 Python
wxPython之解决闪烁的问题
2018/01/15 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python装饰器用法实例分析
2019/01/14 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
互动出版网:专业书籍
2017/03/21 全球购物
一些PHP的面试题
2015/05/06 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
高中自我评价范文
2014/01/27 职场文书
起诉书格式范文
2015/05/20 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
微观世界观后感
2015/06/10 职场文书
python如何获取网络数据
2021/04/11 Python
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Go归并排序算法的实现方法
2022/04/06 Golang