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 处理 URL 的两个函数代码
Aug 13 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
Angularjs过滤器使用详解
May 25 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
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
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php生成与读取excel文件
2016/10/14 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript 继承实现方法
2009/08/26 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
小学生打架检讨书
2014/01/26 职场文书
建筑结构施工求职信
2014/07/11 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
python多线程方法详解
2022/01/18 Python
python数据处理之Pandas类型转换
2022/04/28 Python