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

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

    fedora默认不安装ftp服务(包括client程序/service程序),需要进行手动安装: yum install ftp(安装client) yum install vsftpd(安装serv ...

  2. Directx教程(29) 简单的光照模型(8)

    原文:Directx教程(29) 简单的光照模型(8)      现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...

  3. swiper踩过的哪些坑

    最近,苦恼于各种轮播的需求,每个自己都要自己写,写的挺烦的.终于,在网上发现了swiper插件,发现还是挺实用的,但其中还是踩过了不少的坑,其中有不少都是很简单的问题,但到发现的时候都是花了不少时间, ...

  4. Directx11学习笔记【八】 龙书D3DApp的实现

    原文:Directx11学习笔记[八] 龙书D3DApp的实现 directx11龙书中的初始化程序D3DApp跟我们上次写的初始化程序大体一致,只是包含了计时器的内容,而且使用了深度模板缓冲. D3 ...

  5. KiCad 5.1.0 镜像圆弧后错位问题

    KiCad 5.1.0 镜像圆弧后错位问题 看官方回复这个问题将在 5.1.3 进行修复,因为这段时间在举行 KiCon 活动. 看到这个问题并不是非常严重,不是致命的,所以已经从 5.1.0 跳到 ...

  6. MaxCompute 图计算用户手册（上）

    概要 ODPS GRAPH是一套面向迭代的图计算处理框架.图计算作业使用图进行建模,图由点(Vertex)和边(Edge)组成,点和边包含权值(Value),ODPS GRAPH支持下述图编辑操作: ...

  7. sql查询报java.sql.SQLException: Column 'LC_ID' not found 的错误实际上是mysql在hibernate别名的问题

    报java.sql.SQLException: Column 'LC_ID' not found 的错误实际上是mysql在hibernate别名的问题 我的查询sql是 String sql2 =& ...

  8. 异常处理之多重catch

    package com.sxt.exception.test1; import java.util.InputMismatchException; import java.util.Scanner; ...

  9. Oracle中的Union、Union All、Intersect、Minus[转]

    众所周知的几个结果集集合操作命令,今天详细地测试了一下,发现一些问题,记录备考. 假设我们有一个表Student,包括以下字段与数据: drop table student; create table ...

  10. Getting started with the basics of programming exercises_1

    1.编写一个将输入复制到输出的程序,并将其中连续的多个空格用一个空格代替 使用if 结构: #include<stdio.h> #define NONBLANK 'a'; // repal ...