javascript - 使用 react.js 从嵌套子项中获取表单值

Question

如何将 child 的状态传回容器？我有一个非常简单的应用程序，但因为我现在将它们拆分为更小的组件，所以我无法将状态值 (Form) 传递回其容器。我也可以在子组件中调用 api，然后通过 props 容器接收它，但这并不干净，我希望将“最终事件”放置在容器中，并且容器具有“主要”状态。

我的初衷(确保“主要”状态存储在容器中)是否正确？如果是，如何将状态从子组件传回容器？假设我没有使用 redux。

https://codesandbox.io/s/8zrjjz3yjj

Answer 1

将方法作为 props 传递:

家长:

class Parent extends Component {
    ....

    render = () => <Child onChange={childDidSomething}/>

    childDidSomething = state => {
        ...
    }
}

child :

class Child extends Component {
    ....

    render() {...}

    somethingChanged() {
        this.props.onChange(this.state);
    }
}