## 如何在 React 中实现父组件 A 下子组件 C 获取子组件 D 中文本输入框的值？-js教程-PHP中文网

## 如何在 React 中实现父组件 A 下子组件 C 获取子组件 D 中文本输入框的值？

碧海醫心

发布： 2024-10-25 09:03:53

原创

570人浏览过

## 如何在 react 中实现父组件 a 下子组件 c 获取子组件 d 中文本输入框的值？

父组件与其子组件同等级子组件之间传值

给定一个父组件 a，有两个子组件 b 和 c。子组件 b 包含一个子组件 d，其中 d 中包含一个文本输入框。子组件 c 上有一个按钮，单击该按钮可获取 d 中文本输入框的值。

现有的解决方案

op 尝试了以下两个解决方案：

通过直接操作 dom
试图从 d 传递值到 b，再从 b 传递到 a，最后从 a 传递到 c，但始终不成功

其他解决方案

除了上述解决方案，还有两种其他方法可以实现此需求：

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

1. 层层传值

在顶级组件 a 中，使用 usestate 钩子管理文本输入框的值，并将其传递到 d 组件。然后，将值从 d 组件传递到 b 组件，再从 b 组件传递到 c 组件。

// a 组件
const appa = () => {
  const [value, setvalue] = usestate("");
  return (
    <d value={value} setvalue={setvalue} />
    <c value={value} />
  );
};

// b 组件
const appb = ({ value, setvalue }) => {
  return <d value={value} setvalue={setvalue} />;
};

// c 组件
const appc = ({ value }) => {
  // 获取文本输入框的值
  return <button onclick={() => alert(value)}>获取</button>;
};

// d 组件
const appd = ({ value, setvalue }) => {
  return <textarea value={value} onchange={(e) => setvalue(e.target.value)} />;
};

登录后复制

2. react context

react 中提供了一种名为 createcontext 的内建钩子，用于在组件树中管理共享状态。使用 context，可以在 a 组件中创建共享状态，然后子组件可以在任何地方使用该状态。

// context.js
const TextareaContext = React.createContext("");

// A 组件
const AppA = () => {
  const [value, setValue] = useState("");
  return (
    <TextareaContext.Provider value={{ value, setValue }}>
      <B />
      <C />
    </TextareaContext.Provider>
  );
};

// B 组件
const AppB = () => {
  return <D />;
};

// D 组件
const AppD = () => {
  const { value, setValue } = useContext(TextareaContext);
  return <textarea value={value} onChange={(e) => setValue(e.target.value)} />;
};

// C 组件
const AppC = () => {
  const { value } = useContext(TextareaContext);
  return <button onClick={() => alert(value)}>获取</button>;
};

登录后复制

以上就是## 如何在 React 中实现父组件 A 下子组件 C 获取子组件 D 中文本输入框的值？的详细内容，更多请关注php中文网其它相关文章！