React父子组件间的传值的方法


Posted in Javascript onNovember 13, 2018

父组件向子组件传值:

父组件:

import React, { Component } from 'react';
import Child from './chlid';

class parent extends Component{
 constructor(props) {
  super(props);
  this.state = {
   txt0:"默认值0",
   txt1:"默认值1"
  }
 }
 componentDidMount(){

 }
 parToson(){
  this.setState({
   txt0:"哈哈哈哈"
  })
 }
 sonToPar(e){
  this.setState({
   txt1:e
  })
 }
 render(){
  const style={
   paddingLeft:"150px"
  }
  return(
   <div style={style}>
    <button onClick={this.parToson.bind(this)}>传值给子组件</button>
    <div>接受子组件的传值为:{this.state.txt1}</div>
    <br/>
    <Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/>
   </div>
  )
 }

}

子组件:

import React, { Component } from 'react';

class child extends Component{
 constructor(props) {
  super(props);
  this.state = {
   msg:"啦啦啦啦"
  }
 }
 componentDidMount(){

 }
 render(){
  return(
   <div>
    <div>接受父组件传的值为:{this.props.message}</div>
    <button onClick={()=>this.props.getsonToPar(this.state.msg)}>传值给父组件</button>
   </div>
  )
 }
}

export default child;

github:https://github.com/Rossy11/react/blob/master/src/component/router4.js

补充:

子组件向父组件传值,

同样是父组件:

import React from "react"

import ComentList from "./ComentList"
class Comment extends React.Component {

 constructor(props) {

  super(props);

  this.state = {

   parentText: "this is parent text",
   arr: [{

    "userName": "fangMing", "text": "123333", "result": true

   }, {

    "userName": "zhangSan", "text": "345555", "result": false

   }, {

    "userName": "liSi", "text": "567777", "result": true

   }, {

    "userName": "wangWu", "text": "789999", "result": true

   },]

  }

 }
 fn(data) {

  this.setState({

   parentText: data //把父组件中的parentText替换为子组件传递的值

  },() =>{

   console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作

  });

 

 }
 render() {

  return (

   <div>

    //通过绑定事件进行值的运算,这个地方一定要记得.bind(this),

   不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变

    <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}> 

    </ComentList>

    <p>

     text is {this.state.parentText}

    </p>

  

   </div>

 

  )

 }

}
export default Comment;

子组件:

import React from "react"
class ComentList extends React.Component {

 constructor(props) {

  super(props);

  this.state = ({

   childText: "this is child text"

  })
 }

 clickFun(text) {

  this.props.pfn(text)//这个地方把值传递给了props的事件当中

 }

 render() {

  return (

   <div className="list">

    <ul>

     {

      this.props.arr.map(item => {

       return (

        <li key={item.userName}>

         {item.userName} 评论是:{item.text}

        </li>

       )

      })

     }

    </ul>

    //通过事件进行传值,如果想得到event,可以在参数最后加一个event,

    这个地方还是要强调,this,this,this

    <button onClick={this.clickFun.bind(this, this.state.childText)}>

     click me

    </button>

   </div>

  )

 }

}
export default ComentList;

before:

React父子组件间的传值的方法

after:

React父子组件间的传值的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript cookies操作集合
Apr 12 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
angularJS中router的使用指南
Feb 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 #Javascript
详解如何用typescript开发koa2的二三事
Nov 13 #Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 #Javascript
koa源码中promise的解读
Nov 13 #Javascript
vue-router传递参数的几种方式实例详解
Nov 13 #Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 #Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
为什么python比较流行
2020/06/19 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
廉政承诺书
2015/01/19 职场文书
大学生逃课检讨书
2015/05/04 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android