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

首先，先把在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>

                        </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>

                    //子组件标签里将父组件的数据传递给子组件，在子组件里利用props接收；key值变化时，子组件数据更新

                    <Son key={this.state.key} fname={this.state.fname} fage={this.state.fage} toData={this.toData.bind(this)}></Son>

                </div>

            )

        }

    }

</script>
  //子组件

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>

        )

    }

}

　　

react 父组件与子组件双向绑定的更多相关文章

  1. vue 实现父组件和子组件之间的数据双向绑定

    前言:vue 实现父组件给子组件传值,然后子组件可以修改回父组件的值.vue 的 prop 默认是单向数据绑定,但是偶尔需要双向绑定,这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据.转载 ...

  2. Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

  3. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  4. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

  5. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  6. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  7. react 父组件向子组件传递函数

    这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以 ...

  8. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  9. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

  10. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. 【51NOD1028】大数乘法 V2

    ╰(￣▽￣)╭ 给出2个大整数A,B,计算A*B的结果. (A,B的长度 <= 100000,A,B >= 0) (⊙ ▽ ⊙) 把大整数A看做一个次数界为lenA的多项式A(x),其中x ...

  2. 阿里云区块链共创会：BaaS正式商业化 广邀合作伙伴共建生态

    摘要: 阿里云宣布区块链服务Hyperledger Fabric版正式商业化,并发布生态合作伙伴计划. 2019年3月29日,阿里云区块链于深圳召开正式商业化共创会,宣布区块链服务Hyperledge ...

  3. MaxCompute助力小影短视频走向全球化

    数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...

  4. NS2学习笔记

    这两天在调一个仿真程序,比较奇怪的错误,就是一个节点广播消息,在它通信半径内的节点收不到消息,一直在通信上找问题,找了半天也没找到. 最后,用gdb调试,发现在一个操作指针处发生了段错误,引起的原因时 ...

  5. hdu5441 并查集 长春网赛

    对于每次询问的大的值,都是从小的值开始的,那就从小到大处理,省去很多时间,并且秩序遍历一遍m; 这题cin容易超时,scanf明显快很多很多.G++又比C++快; //这代码scanf400+,cin ...

  6. oracle函数 chartorowid(c1)

    [功能]转换varchar2类型为rowid值 [参数]c1,字符串,长度为18的字符串,字符串必须符合rowid格式 [返回]返回rowid值 [示例] SELECT chartorowid('AA ...

  7. oralce函数 count(*|[distinct|all]x)

    [功能]统计数据表选中行x列的合计值. [参数] *表示对满足条件的所有行统计,不管其是否重复或有空值(NULL) all表示对所有的值统计,默认为all distinct只对不同的值统计, 如果有参 ...

  8. 看看国外的JavaScript题目

    ---恢复内容开始--- 题目一 (function(){    return typeof arguments;})(); 答案:“object” arguments是对象,伪数组有两件事要注意这里 ...

  9. 11-2 css盒模型和浮动以及矢量图用法

    一 盒模型 1属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子 ...

  10. PDM->OOM->C#实体类生成时，对Blob类型字段的处理

    pdm中的Blob字段生成OOM时,自动变成了string类型,再生成实体类时也是string 如何将oom中对应的blob字段设置为Byte[]类型,目前没找到方法, 只能通过脚本,将生成后的OOM ...