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

Passing data from child to parent component in ReactJS

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

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

应用程序.js


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组件定义了一个handleClick带有num
参数的函数。

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

单击的button元素时，将调用函数，并且可以在
组件中访问我们传递给函数的参数。ChildhandleClickParent

您可能还需要将该event对象包含在函数的参数中。

应用程序.js


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函数将event对象和数字作为参数，Child组件将转发event给Parent.

您可以使用这种方法将任何内容从 a 传递Child到组件。 Parent

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

–