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

首先，先把在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. TCPThree_C杯 Day2

    T1 我已经被拉格朗日插值蒙蔽了双眼,变得智障无比. 第一反应就是拉格朗日插值,然后就先放下了它. 模数那么小,指数那么大,这是一套noip模拟题,拉格朗日,你脑袋秀逗了? 无脑暴力20分贼开心. 正 ...

  2. IIS 设置 FTP 服务器 添加多个账户

    我们有很多童鞋经常开不动IIS自带的FTP如何创建,就算创建了也不会实现多用户,下面我来分享一下我的经验吧: 使用 IIS 设置 FTP 服务器 依次单击“开始”按钮.“控制面板”和“添加或删除程序” ...

  3. pycharm 永久注册

    pycharm 使用又到期了,找到了破解版亲测(到期日期2099/12/31),绝对简单好用,直接使用步骤: 一,下载pycharm(windows版):  https://www.jetbrains ...

  4. 撸了一个微信小程序项目

    学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男 ...

  5. [Java]ITOO初步了解 标签： javajbosstomcat 2016-05-29 21:14 3367人阅读 评论(34)

      开始接触Java的ITOO了,这两天在搭环境,结果发现,哇,好多没接触过的东西,先写篇博客来熟悉一下这些工具. JBoss 基于Tomcat内核,青胜于蓝   Tomcat 服务器是一个免费的开放 ...

  6. 因为对 Docker 不熟悉建了 N 多个 Nginx

    因为对 Docker 不熟悉建了 N 多个 Nginx 一直不停的 docker run nginx 结果出现无数个 nginx. 然后最原来的 nginx 启动不了了. 使用 docker ps - ...

  7. c#操作sqlite db3数据库

    首先添加引用 System.Data.SQLite.dll,引用只用添加这个,但SQLite.Interop.dll文件必须也和它同时放在Debug目录下 然后可用: SQLiteConnection ...

  8. python 空值（NoneType）

  9. HDU-2859_Phalanx

    Phalanx Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. UVa-10986_Sending email (向前星+Dijkstra)

    题意:给你点.边,求起点到终点的最短距离. 题解:由于题目的数据量特别大,所以需要用邻接表来存边,之后对Dijkstra算法稍微魔改一下就可以了,本来以为会超时,做好了打堆优化的准备,结果卡时间过了, ...