React Hook:将数据从子组件发送到父组件 [英] React Hook : Send data from child to parent component

问题描述

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

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

我正在构建一个管理界面，其中一个 PageComponent 包含一个 ChildComponent 和一个表格，我可以在其中选择多行.我想将我在我的 ChildComponent 中选择的行数发送给我的父 PageComponent.

类似的东西:

页面组件:

<增强表/><h2>计数0</h2>(计数应该从孩子更新)

子组件:

 const EnhancedTable = () =>{const [count, setCount] = useState(0);返回 (<button onClick={() =>setCount(count + 1)}>点击我{count})};

我确定这是一件非常简单的事情，我不想为此使用 redux.

解决方案

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

 const EnhancedTable = ({ parentCallback }) =>{const [count, setCount] = useState(0);返回 (<button onClick={() =>{const newValue = 计数 + 1;设置计数(新值)；父回调(新值)；}}>点击我{count})};class PageComponent 扩展了 React.Component {回调=(计数)=>{//对父组件中的值做一些事情，比如保存到状态}使成为() {返回 (
<EnhancedTable parentCallback={this.callback}/><h2>计数0</h2>(计数应该从孩子更新)
)}}

I'm looking for the easiest solution to pass data from a child component to his parent.

I've heard about using Context, pass trough properties or update props, but I don't know which one is the best solution.

I'm building an admin interface, with a PageComponent that contains a ChildComponent with a table where I can select multiple line. I want to send to my parent PageComponent the number of line I've selected in my ChildComponent.

Something like that :

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

I'm sure it's a pretty simple thing to do, I don't want to use redux for that.

解决方案

You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.

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

这篇关于React Hook:将数据从子组件发送到父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！