如何让React父组件访问没有表单的子状态（使用Sandbox）？

Question

我目前正在寻找一种从父组件访问子state的方法，该组件将处理整个页面的API调用。

实际问题如下：

Parent是将呈现两个Child组件的父组件。

每个Child都有一个由它负责的州。

“提交按钮类型”将具有“一种提交行动”（这是全部引用，因为这不是表格）并且应该触发该功能以提供对子状态的访问。有没有办法（一些React功能）不使用<form>或没有创建中间父组件来保持所有状态？我希望每个孩子都对自己的国家负责。

Code Sandbox with example of the code below

import React, { useState, useRef } from "react";

function ChildOne() {
  const [childOneState, setChildOneState] = useState(false);

  return (
    <React.Fragment>
      <h3>Child One</h3>
      <p>My state is: {childOneState.toString()}</p>
      <button onClick={() => setChildOneState(true)}>Change my state</button>
    </React.Fragment>
  );
}

function ChildTwo() {
  const [childTwoState, setChildTwoState] = useState(false);

  return (
    <React.Fragment>
      <h3>Child Two</h3>
      <p>My state is: {childTwoState.toString()}</p>
      <button onClick={() => setChildTwoState(true)}>Change my state</button>
    </React.Fragment>
  );
}

function Button(props) {
  return (
    <button onClick={props.kindOfSubmitAction}>Kind of Submit Button</button>
  );
}

function Parent() {
  const childOneState = useRef("i have no idea");
  const childTwoState = useRef("ihave no idea");

  function kindOfSubmitAction() {
    console.log("This is the kindOfSubmit function!");
    // This function would somehow get
    // access to the children state and store them into the refs
    return;
  }

  return (
    <React.Fragment>
      <h1>Iam Parent</h1>
      <div>
        <b>Child one state is: </b>
        {childOneState.current}
      </div>
      <div>
        <b>Child two state is: </b>
        {childTwoState.current}{" "}
      </div>

      <Button kindOfSubmitAction={kindOfSubmitAction} />

      <ChildOne />
      <ChildTwo />

    </React.Fragment>
  );
}

export default Parent;

Answer 1

当几个组件需要访问相同的数据时，是时候Lifting State Up了。