我在 React 导航的 navigationOptions 中添加了一个带有按钮（即搜索图标）的搜索栏。现在我想用navigate函数发送输入的文本。我不知道如何通过 TextInput 的引用来获取它的本机文本。以下是我到目前为止所做的代码。

但由于navigationOptions是静态的，我不能this在其中使用关键字。我也不能state在 navigationOptions 中使用。那么我如何使用ref在按钮按下时获取输入文本。

编辑

我想从中获得TextInput价值ref

这样我就可以从中获得它的价值

但我不能使用this关键字或stateinnavigationOptions因为它是静态的。如何在单击按钮时访问 TextInput 的值？

我想结合使用fullcalendar-react和react-dnd来将日历事件拖到其他地方。

React-dnd 很简单——它提供了几个生成 refs 的钩子，你可以附加 'draggable' 或 'droppable' 元素目标：

然后使用 fullcalendar-react - 我想让渲染的日历事件成为“可拖动”目标。

然而，据我所知，fullcalendar-react 组件实际上并不由 React 子组件组成——它本质上是一个直接通过原始库进行 DOM 操作的组件。我们确实可以通过回调直接访问事件 DOM 元素。eventRender

有没有办法让 ref 直接引用 DOM 元素？

我正在尝试转换EditableTabGroup为功能组件Tags，但是在尝试删除时似乎无法正确转换它this.。

EditableTabGroup 工作正常，但是当我在其中渲染Tags时Taskform它不起作用。

另外，我怎样才能清除状态标签，以便 onCreate(submit) 标签是一个空数组？

我有两个组件。一个父母和一个孩子。

在父组件内部，我有一个按钮。如果用户单击该按钮，我想对子组件内的另一个按钮执行 ScrollIntoView。

我想我想定义对子按钮 a 的引用，以便我在父按钮 onClick 内可以执行以下操作：

这将滚动到子组件中的按钮。

这是一个缩小的示例：

父组件.jsx

ChildComponent.jsx

我知道上面的代码不起作用，它只是为了说明我想要实现的目标。

我真的尝试了通过谷歌搜索找到的所有其他解决方案，它们看起来都很简单，但它们似乎都不适用于我的用例。我也尝试过使用 forwardRef ，但这也不能解决我的问题。

更新

我想我对什么不起作用有点模糊。我在实现中收到了很多不同的错误消息。

以下是其中之一：

函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

解决方案

好的。我想我会用@Vencovsky 提供的解决方案在这里组装这些部件。

这是问题中看到的两个示例组件的完整实现：

父组件.jsx

ChildComponent.jsx

我在一个组件中有一个带有 ref 的文本框（modalBox.js）我如何在按钮单击时访问另一个组件上的文本框的值，例如（index.js）

这是关于在规范中使用 React refs 的问题。具体来说，我在浏览器中看到的行为与在测试中运行时看到的行为不同。

// app_container.test.js

// app_container.js 代码

发生的事情是这段代码在浏览器中对我来说很好。在 setTimeout 中调用该函数时，this.abc_logo_inner_ref 正确附加到由LogoContainer

我可以检查它（在我的浏览器中使用debugger），它看起来像这样：

但是，当从我的 Jest 规范（上）运行时，不会填充 ref，即使我在测试本身中渲染组件（见上文），当我 console.log 在我的测试中输出这些 Ref 对象时

我的预期结果是一个正确填充的 Ref 对象，其中current元素指向由 React 在呈现此组件时创建的 DOM 元素。

在下面的代码中，我无法使用 this.setState({name: this.nameRef.current.value})。有人可以告诉为什么会这样吗？一旦我在 ref 的当前值中有一些东西，为什么我不能用它来更新组件的当前状态？另外，这是错误的做法吗？但是，如果它不起作用也没关系。

提前致谢！

我正在查看 react-data-grid 源代码并注意到这一行：https ://github.com/adazzle/react-data-grid/blob/34a2e51931bba2ac8a2f738cd059945d66516b48/packages/react-data-grid/src/HeaderCell.tsx #L107

我似乎无法弄清楚是什么！是在做。

语境

• 我们这里只使用键盘，没有鼠标点击。
• 图片我们有 10 个表格行。
• 每行都有一个菜单按钮。
• 选项卡将弹出 4 项下拉菜单。（焦点在菜单按钮上）
• 按向下箭头，焦点应位于下拉菜单的第一项（在我的代码中不起作用）

代码

我的理解

• 我看这个例子和这个
• 参考数组const listRefs = useRef([]);
• 我的列表是li
• ref={listRef => (listRefs.current[index] = listRef)}

我想制作一个可拖动的 div，所以我创建了一个 ref 来访问该 div，这样我就可以在 Rxjs fromEvent 运算符中使用它

问题是 ref 对象将在 fromEvent 中使用后设置（第一次 ref 尚未设置）所以我把它放在 if 语句中，所以它只在设置时使用 ref。

现在 dragRef.current 已设置，但组件不再执行

这是我正在使用的代码：