迹忆客 专注技术分享

在 React 中将数据从子组件传递到父组件：

1. 将函数作为 prop 传递给 Child 组件。
2. 调用 Child 组件中的函数并将数据作为参数传递。
3. 访问 Parent 函数中的数据。

import {useState} from 'react';

function Child({handleClick}) {
  return (
    <div>
      <button onClick={event => handleClick(100)}>Click</button>
    </div>
  );
}

export default function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = num => {
    // 👇️ take parameter passed from Child component
    setCount(current => current + num);
  };

  return (
    <div>
      <Child handleClick={handleClick} />

      <h2>Count: {count}</h2>
    </div>
  );
}

Parent 组件定义了一个带有 num 参数的 handleClick 函数。

我们将该函数作为 prop 传递给 Child 组件，因此 Child 能够调用该函数并将我们需要在 Parent 中访问的任何数据传递给它。

单击 Child 的按钮元素时，将调用 handleClick 函数，并且可以在 Parent 组件中访问我们传递给该函数的参数。

我们可能还需要在函数的参数中包含事件对象。

import {useState} from 'react';

function Child({handleClick}) {
  return (
    <div>
      <button onClick={event => handleClick(event, 100)}>
        Click
      </button>
    </div>
  );
}

export default function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = (event, num) => {
    console.log(event.target);

    setCount(current => current + num);
  };

  return (
    <div>
      <Child handleClick={handleClick} />

      <h2>Count: {count}</h2>
    </div>
  );
}

现在 handleClick 函数将事件对象和一个数字作为参数，子组件将事件转发给父组件。

我们可以使用此方法将任何内容从子组件传递到父组件。

我们所要做的就是将一个函数 prop 传递给 Child 并在 Child 组件中调用该函数，将我们需要在 Parent 中访问的数据作为参数传递给它。