如何在 ReactJS 中将数据从子组件传递到其父组件？

在 ReactJS 中，数据通过 props 的方式从父组件传递到子组件。但是，如果你想把数据从子组件传递回父组件，该怎么办呢？本文将介绍如何在 ReactJS 中将数据从子组件传递到其父组件。

使用回调函数

在 ReactJS 中，可以通过定义回调函数（callback function）的方式实现从子组件向父组件传递数据。下面是一个例子：

// ParentComponent.jsx
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [data, setData] = useState("");

  const handleCallback = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <ChildComponent callback={handleCallback} />
      <p>{data}</p>
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React, { useState } from "react";

function ChildComponent(props) {
  const [childData, setChildData] = useState("");

  const handleChange = (event) => {
    setChildData(event.target.value);
    props.callback(childData); // 调用父组件的回调函数，将子组件的数据作为参数传递过去
  };

  return (
    <div>
      <input type="text" value={childData} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件 ParentComponent 定义了一个状态 data，表示子组件传递过来的数据。它还定义了一个名为 handleCallback 的回调函数，用于处理从子组件传来的数据，并将其存储在状态 data 中。在返回的 JSX 中，父组件渲染了 ChildComponent 组件，并将 handleCallback 函数以 callback 属性的形式传递给了它。

子组件 ChildComponent 定义了一个状态 childData，表示用户在输入框中输入的数据。它还定义了一个名为 handleChange 的函数，用于在用户输入时更新 childData 状态，并调用父组件传来的回调函数 props.callback，将 childData 作为参数传递过去。这样，handleCallback 函数就能够接收到子组件传递过去的数据了。

注意，这里不要直接使用 childData 作为回调函数的参数，因为 handleChange 函数中调用 props.callback 的时候，childData 可能还没有被更新。要确保在最新的 childData 值传递给父组件。

使用 Context API

除了回调函数，还可以使用 React 的 Context API 实现从子组件向父组件传递数据。下面是一个例子：

// Context.jsx
import React from "react";

const MyContext = React.createContext("");

export default MyContext;

// ParentComponent.jsx
import React, { useState } from "react";
import MyContext from "./Context";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [data, setData] = useState("");

  return (
    <MyContext.Provider value={{ data, setData }}>
      <ChildComponent />
      <p>{data}</p>
    </MyContext.Provider>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React, { useContext } from "react";
import MyContext from "./Context";

function ChildComponent() {
  const { data, setData } = useContext(MyContext);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件 ParentComponent 创建了一个 Context 对象 MyContext，并将状态 data 和更新状态的函数 setData 通过 Context 的 value 属性传递给它的子组件。在返回的 JSX 中，父组件首先渲染了 ChildComponent 组件，让它成为 Context 的 Provider。

子组件 ChildComponent 使用了 useContext 钩子函数获取 Context 的值，即父组件传来的 data 和 setData。它还定义了一个名为 handleChange 的函数，用于在用户输入时更新 data 状态。

在这个例子中，子组件没有显式地将数据传递回父组件，而是直接调用了父组件传递过来的更新状态的函数 setData。由于 data 和 setData 都是来自同一个 Context，所以子组件对 data 状态的更新会直接影响到父组件。

总结

通过回调函数和 Context API，我们可以在 ReactJS 中比较方便地实现从子组件向父组件传递数据。具体选择哪种方法，取决于实际情况和个人偏好。