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

发布于04月17日

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

我听说过使用上下文、传递属性或更新props ，但我不知道哪一个是最好的解决方案.

我正在构建一个管理界面，有一个PageComponent，其中包含一个ChildComponent，还有一个表，我可以在其中 Select 多行.我想把我在ChildComponent中 Select 的行数发送给我的父PageComponent.

诸如此类:

页面组件:

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

子组件:

 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>
            )
        }
    }