React父子组件间的传值的方法
父组件向子组件传值:
父组件:
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:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)