我如何将 useState 值从 child 传递到 parent

How can i pass useState value from child to parent

我有两个 child 组件,它们具有不同的状态。现在我想在 two-child 组件中使用状态并在 parent 中渲染它。我该怎么做

function ChildA() {
  const [solutestate, setsolutestate] = useState("");
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolutestate}
      />
    </div>
  );
}

const childB = () => {
  const [solventstate, setsolventstate] = useState("");

  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolventstate}
      />
    </div>
  );
};


function App() {
  return (
    <div className="App">
      <ChildA />
      <ChildB />

      <div>{solutestate}</div>
      <div>{solventstate}</div>
    </div>
  );
}

你应该将状态保存在父级中(称为提升状态),然后将设置器传递给子级。

function ChildA({ setsolutestateA}) {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateA}
        />
      </div>
    );
  }
  
  const childB = ({{ setsolutestateB}}) => {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateB}
        />
      </div>
    );
  };
  
  
  function App() {
    const [solutestateA, setsolutestateA] = useState("");
    const [solutestateB, setsolutestateB] = useState("");

    return (
      <div className="App">
        <ChildA {...{setsolutestateA}}/>
        <ChildB {...{setsolutestateB}}/>
  
        <div>{solutestateA}</div>
        <div>{solutestateB}</div>
      </div>
    );
  }

您应该将设置状态的函数从 parent 传递给 child 组件,这样 child 可以通过调用更新 parent 的状态一个通过 props 传递的函数。

例如: Parent:

function App() {
  const [solventstate, setsolventstate] = useState("");

  const sendDataToParent = (solventstate) => { // the callback. Use a better name
    setsolventstate(solventstate);
  }
 
  return (
    <div className="App">
      <ChildA sendDataToParent={sendDataToParent}/>
      <ChildB sendDataToParent={sendDataToParent}/>
    </div>
  );
};

Child:

const childB = ({sendDataToParent}) => {
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={sendDataToParent(solventstate)}
      />
    </div>
  );
}: