首页 > 编程 > JavaScript > 正文

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

2019-11-19 12:31:42
字体:
来源:转载
供稿:网友

父组件向子组件传值:

父组件:

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:

after:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表