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 @   何人陪我共长生  阅读(239)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示