登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > ## 如何在 React 中实现父组件 A 下子组件 C 获取子组件 D 中文本输入框的值？

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

2024-10-31 12:49:07 0浏览 收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《## 如何在 React 中实现父组件 A 下子组件 C 获取子组件 D 中文本输入框的值？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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

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

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

现有的解决方案

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

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

其他解决方案

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

1. 层层传值

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

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

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

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

// d 组件
const appd = ({ value, setvalue }) => {
  return