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

首先，先把在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. fedora下eclipse安装tomcat插件

    首先下载tomcat插件: http://www.eclipsetotale.com/tomcatPlugin.html,下载最新的3.3版本: 由于我的eclipse是通过yum自动安装的,因此ec ...

  2. 【python小随笔】进程池 multiprocessing.Pool的简单实现与踩过的坑

    #导入进程模块 import multiprocessing #创建进程池 坑:一定要在循环外面创建进程池,不然会一直创建 pool = multiprocessing.Pool(30) for Si ...

  3. Directx教程(30) 如何保证渲染物体不会变形

    原文:Directx教程(30) 如何保证渲染物体不会变形      在Directx11教程(6)中, 我们曾经实现过这个功能,但那时是在SystemClass中,处理WM_SIZE时候,重新调用m ...

  4. Liferay OSGi注解（Annotation） - 使用手册(译文)

    mark过来好好用 上Neil的博客地址Liferay OSGi注解(Annotation) - 使用手册(译文) @Component是注入服务 @Reference是获取服务(在Liferay框架 ...

  5. 网络流24题 最小路径覆盖（DCOJ8002）

    题目描述 给定有向图 G=(V,E) G = (V, E)G=(V,E).设 P PP 是 G GG 的一个简单路(顶点不相交)的集合.如果 V VV 中每个顶点恰好在 P PP 的一条路上,则称 P ...

  6. srand函数

    srand函数是随机数发生器的初始化函数. 原型: void srand(unsigned seed); 用法:它需要提供一个种子,这个种子会对应一个随机数,如果使用相同的种子后面的rand()函数会 ...

  7. Extended Traffic

    题目链接 题意:有n个路口,m条通路,如果经过一条路则会得到(终点 - 起点)^3的权值,求从1点到其他点的最小权值,如果权值小于3或无法到达输出'?'. 题解:因为权值可能为负,所以用SPFA来解题 ...

  8. 薪资管理系统（Java面向对象思想）

    package com.test3; import java.util.*; import java.io.*; /** * @author qingfeng * 重要思想:面向对象思想(添加员工管理 ...

  9. etcd 在超大规模数据场景下的性能优化

    作者 | 阿里云智能事业部高级开发工程师 陈星宇(宇慕) 概述 etcd是一个开源的分布式的kv存储系统, 最近刚被cncf列为沙箱孵化项目.etcd的应用场景很广,很多地方都用到了它,例如kuber ...

  10. 关于react-router 路径改变页面没有刷新

    routert.js 中: <Router> <Switch> <Route exact path="/" component={Login}> ...