编辑高阶和低阶分量之间的状态

问题描述

enter image description here

我有这个好笑的地方。日记页面一个日记组件都是类组件

现在,当我想将内容低订单修改高订单时。我通过道具传递一个功能。然后在低阶组件ex中使用它。

JournalPage.js

            <OneJournal
            accounts={this.state.Accounts}
            journal={value}
            onJournalDelete={this.handleOneJournalDelete}
            totalAccounts={this.state.TotalTypes}
            handleOneJournalChange={this.handleOneJournalChange} <=== the function which edit the highr order via low order

我的问题是,如何在不使用第三方库的情况下从高阶组件中的低阶组件中编辑状态值?

解决方法

按照我的理解,您要从子级更新父级组件状态 你可以做到

class childrenComp extends Component {

    updateState = ()=> {
        this.props.updateState({title: 'edit'})
    }
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

class Parent extends Component {
    state = {
        title: ''
    }
    render() {
        return (
            <childrenComp setState={this.setState}>
                
            </childrenComp>
        )
    }
};