React：更改了子组件中的状态。如何查看父组件的变化？

Question

对于我正在开发的网站，我制作了一个带有复选框的组件，可以触发父组件中的状态更改。我已通过子组件在控制台中检查状态已更改，但我希望父组件也“注意到”更改。我尝试过 useEffect 和 componentDidUpdate 但它们都不会被状态更改触发。

为了澄清，结构如下所示：

父级：具有初始状态子级：通过父级访问状态并更改状态

在页面刷新时，父级会注意到状态更改，但我希望无需刷新页面即可实现这一点。

我希望这是有道理的，提前谢谢你:)

Answer 1

这是你想要的？

import React, { useState } from "react";

const Parent = () => {
  const [someState, setSomeState] = useState("Initial Some State");

  const onChangeSomeState = (newSomeState) => {
    setSomeState(newSomeState);
  };

  return (
    <div>
      Parent:
      <Child
        someState={someState}
        onChangeSomeState={onChangeSomeState}
      ></Child>
    </div>
  );
};

const Child = ({ someState, onChangeSomeState }) => {
  const handleChangeStateClick = () => {
    onChangeSomeState("New Some State from Child");
  };
  return (
    <div>
      Child:{someState}
      <input
        type="button"
        onClick={handleChangeStateClick}
        value="Change state from Child"
      ></input>
    </div>
  );
};

export default Parent;