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处理AJAX请求的方法
May 10 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
如何用JS实现简单的数据监听
May 06 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函数,php爱好者站推荐
2007/03/19 PHP
实用函数7
2007/11/08 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
职高毕业生自我鉴定
2013/10/21 职场文书
初中生学习的自我评价
2013/11/14 职场文书
军训的自我鉴定
2013/12/10 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2015年党性分析材料
2014/12/19 职场文书
大学生自荐材料范文
2014/12/30 职场文书
简单的辞职信模板
2015/05/12 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js