React:在父级中获取子组件组件的状态

Question

我有这个容器在哪里和不在同一水平.当我点击按钮(放在父母上)时,如何获取表格的状态？

我已经创建了一个演示来解决我的问题.

https://codesandbox.io/s/kmqw47p8x7

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  save = () => {
    alert("how to get state of Form?");
    //fire api call
  };
  render() {
    return (
      <div>
        <Form />
        <button onClick={this.save}>save</button>
      </div>
    );
  }
}

• 我不想做的一件事是同步onChange事件的状态,因为在Form中可能有另一个Form.

Answer 1

要从父级访问子实例,您需要了解ref:

首先,formRef在顶部添加App类:

formRef = React.createRef();

然后在App渲染中,将refprop 传递给Form标签:

<Form ref={this.formRef} />

最后,从子形式获取状态:

save = () => {
    alert("how to get state of Form?");

    const form = this.formRef.current;
    console.log(form.state)
};

这里结账演示