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

Question

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

澄清一下，结构如下所示：

父级：具有初始状态 Child：通过parent获取state，改变state

在页面刷新时，父级注意到状态更改，但我希望无需刷新页面即可完成此操作。

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

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;

Answer 2

如果我对您的问题的理解正确，您可以将回调函数传递给子组件。这样，您将从父组件中的回调接收值，如下所示：

const ParentComponent = () => {
    const [someState, setSomeState] = useState()

    const childCallback = (value) => {
       setSomeState(value)
    }

    return <ChildComponent callback={childCallback} />
}

Answer 3

react 的本质意味着数据沿着 dom 树向下流动。使用 props 可以做到这一点。

当 props 发生变化时，react 会注意到它，这会导致 props 的接收者 re-render。但是，正如您所发现的那样，这是一种 uni-directional 关系，只会从 parent 变为 child。

javascript 的美妙之处在于您可以像对待字符串或数字一样对待函数并传递它们。在这种情况下作为道具。

因此，虽然 child 不能 'tell' parent 某些东西直接改变了，但 parent 可以传入 child 的函数可以用来通知更改。

这种从 parent 和 'handler' 函数向下传递值的模式 child 可以用来通知 parent 非常常见，也是一个很好的模式你明白了。

以标准文本输入为例

const Parent = () => {
  // This is our parent's state
  const [inputValue, setInputValue] = useState('hello world');

  // This is the handler we will give to the child to let us know of changes
  const handleInputChange = (e) => setInputValue(e.target.value) 

  return <input
    value={inputValue}
    onChange={handleInputChange} 
  />
}

在上面的示例中，child（输入）在发生变化时将调用提供给它的函数，这将更新 parent 的状态。 React 组件上的任何状态更新（就像道具更改一样）都会导致 re-render，因此会导致视觉更新。

我在任何 child 中使用了一个内置的 <input> 你自己写的只需要接受一个 'handler function' ，当你想让它在你的 child 中调用它parent 知道发生了什么事。

Answer 4

根据我的理解，如果我没弄错的话，我认为你应该将触发事件作为道具从父级传递给子级。

父类（功能组件+钩子）：

const [ userName, setUserName ] = useState("");

return(
  <Child doChangeProps={setUserName} />
)

child（功能组件+hook）：

const { doChangeProps } = props;

return(
  <input onChange={ e => { doChangeProps(e); } } />
)

或者，您可以使用 context 来获得更简单的数据流。

Answer 5

function ParentComponent(){
    const [state, setState] = useState()

    useEffect(() => {
       console.log({ state });
    },[state])

    return <ChildComponent state={state} setState={setState} />
}

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

React: Changed state in Child component. How to see the change in parent component?

javascript

components

state

parent-child

reactjs

父类（功能组件+钩子）：

child（功能组件+hook）：