React:子传父

最新推荐文章于 2024-05-21 20:20:00 发布

原创最新推荐文章于 2024-05-21 20:20:00 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

这篇博客通过一个React示例展示了子组件如何向父组件传递信息。Student组件通过props上的changeFn函数将值传递给父组件Person，实现了状态的更新。文章探讨了React中组件间的通信机制以及状态管理的基本原理。

import React, { Component } from 'react'

// 子传父
class Student extends Component {
    render() {
        return (
            <>
            <h1>{this.props.msg}</h1>
            <button onClick={this.changeVal.bind(this)}>按钮</button>
            </>
        )
    }
    changeVal(){
        // 在props上挂一个函数
        this.props.changeFn(666)
    }
}

export default class Person extends Component {
    state = {
        msg : "传家宝"
    }
    render() {
        return (
            <div>
                <Student msg={this.state.msg} changeFn={this.changeFn.bind(this)}></Student>
            </div>
        )
    }
    changeFn(num){
        this.setState({
            msg :num
        })
    }
}