zoukankan      html  css  js  c++  java
  • 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/re...

    来源:https://segmentfault.com/a/1190000016992970
  • 相关阅读:
    Linux学习
    官网地址
    Unsupported major.minor version 51.0
    获取select的option值
    网页中JS函数自动执行常用三种方法
    Python活力练习Day3
    时间复杂度的简单理解版本,非专业~~
    Python活力练习Day2
    Python活力练习Day1
    状压DP之LGTB 与序列
  • 原文地址:https://www.cnblogs.com/datiangou/p/10158671.html
Copyright © 2011-2022 走看看