react子传父

子组件

import React, { Component } from 'react';
class Web1 extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            num:100,
        }
    }
    son(){
        this.props.content(this.state.num)
    }
    render() { 
        return ( 
            <div onClick={this.son.bind(this)}>子组件</div>
        );
    }
}
export default Web1;

父组件

import React, { Component } from 'react';
import Web1 from "./Web1"
class Father extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            num:"000",
        }
    }

    // 通过这个方法,子组件修改父组件的值
    getValue(value){
        this.setState({
            num: value
        })
    }
    render() { 
        return ( 
            <div>
                {/*子组件的数据传递给父组件,给子组件一个方法content; 子组件通过this..props.content("data")  */}
                <Web1 content={this.getValue.bind(this)}></Web1>

                {this.state.num}
            </div>
        );
    }
}
export default Father;

参考的地址:
https://www.cnblogs.com/luguankun/p/11073688.html

posted @ 2020-08-22 12:07  何人陪我共长生  阅读(237)  评论(0编辑  收藏  举报