React Hook：将数据从子组件发送到父组件

Z时代
2024-01-10
分类：问答

我正在寻找最简单的解决方案，以将数据从子组件传递给他的父组件。

我听说过使用上下文，传递槽属性或更新道具，但我不知道哪个是最佳解决方案。

我正在建立一个管理界面，其中的一个PageComponent包含一个ChildComponent以及一个可以在其中选择多行的表格。我想向我的父级PageComponent发送我在ChildComponent中选择的行数。

像这样：

PageComponent：

<div className="App">
  <EnhancedTable />         
  <h2>count 0</h2>
  (count should be updated from child)
</div>

ChildComponent：

 const EnhancedTable = () => {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
          Click me {count}
       </button>
     )
  };

我敢肯定这是一件很简单的事情，我不想为此使用redux。

回答：

您可以在父组件中创建一个方法，将其传递给子组件，并在每次子状态更改时从props调用它，并将状态保留在子组件中。

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};
class PageComponent extends React.Component {
    callback = (count) => {
        // do something with value in parent component, like save to state
    }
    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}