React组件传值

博客介绍了React组件之间传值,与Vue类似,分为父 - 子传值和子 - 父传值。父 - 子传值通过组件的props属性实现;子 - 父传值需在父组件定义方法并通过props传给子组件,子组件激活该方法传值,且父组件传递方法时要用bind(this)绑定this。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React组件之间传值与Vuel类似,分为父-子传值和子-父传值。

一、父子传值

通过组件的props属性,来达到父组件传值给子组件的目的,

二、子父传值

在父组件中定义方法,并通过props传递给子组件,子组件通过this.props.funName(data)激活父组件方法,传递“data”值。注意:在父组件通过Props传递自定义方法时一定要用bind(this);绑定this。

父组件:

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state={
            parentText:"好好学习,天天向上",
            sonText:""
        }
    }

    show(){
        return this.props.match.params.id;
    }
  
    send=()=>{
        console.log(this);
       this.props.history.push('/Login');
    }
    fun(text){
        this.setState({
            sonText:text
        })
    }

        render(){

            return(

                <div className="home">
                    <h1>我的home页面</h1>
                    <h2>{this.show()}</h2>
                    <div onClick={this.send}>发送</div>
                    <HomeSon parentText={this.state.parentText} onSubmit={this.fun.bind(this)}></HomeSon>//关键是这一句,把父组件的数据或者方法通过Props属性传递给子组件
                    <p>来自子组件的文字:{this.state.sonText}</p>
                </div>
            )
        }



}

 子组件:

class HomeSon extends React.Component{

    constructor(props){
        super(props)
        this.state={
            textSon:"要零钱"
        }
    };
    clickHandler=()=>{
        this.props.onSubmit(this.state.textSon);//激活Props中父组件传过来的事件,并通过参数的方式把子组件需要传递的数据发送给父组件。
        console.log(this.props);
    }
    render(){

        return(
            
            <div>
                <p>我是son组件,爸爸传来的文字:{this.props.parentText}</p>//通过this.props.propsName来获取父组件传递的值
                <button onClick={this.clickHandler}>发送</button>

            </div>
        )
    }

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值