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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
Vue数据绑定简析小结
May 07 Javascript
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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python元组拆包实现方法
2021/02/28 Python
座谈会主持词
2014/03/20 职场文书
化工操作工岗位职责
2014/04/29 职场文书
低碳环保口号
2014/06/12 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
辞职信的写法
2015/02/27 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
护士自我推荐信范文
2015/03/24 职场文书
教研活动主持词
2015/07/03 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书