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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
Vue3 源码导读(推荐)
Oct 14 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
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 列表反转显示的四种方法
2020/11/16 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
触摸春天教学反思
2014/02/03 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
奥利奥广告词
2014/03/20 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
入党函调证明材料
2015/06/19 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Python中requests库的用法详解
2022/06/05 Python