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

首先，先把在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. TRS OM error

    http://192.168.1.1/ http://tplogin.cn/admin888 wddqaz123456789 package="com.trs.om.bean" m ...

  2. 【JZOJ3853】【NOIP2014八校联考第2场第2试9.28】帮助Bsny(help)

    EVRT Bsny的书架乱成一团了,帮他一下吧! 他的书架上一共有n本书,我们定义混乱值是连续相同高度书本的段数.例如,如果书的高度是30,30,31,31,32,那么混乱值为3:30,32,32,3 ...

  3. hackerrank---Find a string

    题目链接 在字符串a中查找字符串b出现的次数...貌似不可以用a.count() 附上代码: a = raw_input().strip() b = raw_input().strip() cnt = ...

  4. 2019-7-4-win10-uwp-处理用户点击关闭按钮

    title author date CreateTime categories win10 uwp 处理用户点击关闭按钮 lindexi 2019-07-04 09:28:57 +0800 2019- ...

  5. Python中的TCP三次握手和四次挥手过程

    tcp三次握手和四次挥手 首先先介绍什么是传输层: 1.三次握手 1) 三次握手的详述 首先Client(客户)端发送连接请求报文,Server(服务器)段接受连接后回复ACK报文,并为这次连接分配资 ...

  6. Spring Security 的登录密码验证过程 UsernamePasswordAuthenticationFilter

    认证过程如下 一.先判断请求(请求必须是post请求)地址是否为配置的 login-processing-url 值(默认/j_spring_security_check),如果不是,则放行,进入下一 ...

  7. vb.net机房收费系统——存储过程

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xdd19910505/article/details/35574125 一.使用背景         ...

  8. SprinfJdbcTemplate+SpringMVC 代码生成器实现的Entity,Dao,Service,Controller，JSP神器（含代码附件）

    代码生成器实现的Entity,Dao,Service,Controller,JSP神器(含代码附件) 原文地址: http://jilongliang.iteye.com/blog/2262070 p ...

  9. Nacos: Namespace 和 Endpoint 在生产环境下的最佳实践

    随着使用 Nacos 的企业越来越多,遇到的最频繁的两个问题就是:如何在我的生产环境正确的来使用 namespace 以及 endpoint.这篇文章主要就是针对这两个问题来聊聊使用 nacos 过程 ...

  10. win10 uwp httpClient 登陆CSDN

    本文告诉大家如何模拟登陆csdn,这个方法可以用于模拟登陆其他网站. HttpClient 使用 Cookie 我们可以使用下面代码让 HttpClient 使用 Cookie ,有了这个才可以保存登 ...