问题标签 [use-ref]

我称我为查看器对象，它将某些东西安装到带有 id 的元素中tgmlviewer。当我只有一个这样的组件时，这很好用。

现在我想创建多个组件。每个组件都需要将唯一的 id 传递给其查看器对象。可以useRef用于这个吗？

这是我最好的尝试：

打字稿错误

ts: const viewerElement: null // 'instanceof' 表达式的左侧必须是 'any' 类型、对象类型或类型参数。

我正在处理 Reactjs 项目，我想打开一个对话框，它是购物车页面的全局组件。这是我单击购物车删除按钮时的购物车页面，然后显示对话框当前为空。

确认对话框：

我正在尝试使用上述代码，但它不起作用，请告诉我我错在哪里。谢谢

我在这里整理了一个小演示： https ://codesandbox.io/s/bold-meitner-r3wzq?file=/src/App.js

当我单击按钮以显示并专注于我的第一个单选按钮时 - 我的单选样式未应用。虽然，如果您紧接着按空格键，它会聚焦正确的元素。

奇怪的是，如果我在 1ms 超时后集中注意力，它会按预期工作。显然，这更像是一个黑客而不是一个解决方案......

我觉得我在这里遗漏了一些非常简单的东西，任何帮助都会很棒！

谢谢！！

或者 - 这是复制所需的所有代码：

我正在做代码审查，发现另一个开发人员编写的代码，例如：

然后使用 divRef 作为对 DOM 元素的引用。

但是，我知道的模式是createRef在类组件中使用并useRef在功能组件中使用钩子。甚至 ReactJS 官方https://reactjs.org/docs/refs-and-the-dom.html都表示要避免未来 React 版本的内联 ref。它是一种传统的写作模式吗？

到目前为止我可以研究的是，inlineref会渲染两次函数，因此建议避免。

我想知道对此的其他解释是什么？

我计划在一个项目中使用 useRef.current.values，并且我正在阅读一份指南，推荐从 useEffect 内部返回值。该指南显示了设置，但没有使用值的示例。

我对如何从 useEffect 中获取 useRef 值感到困惑。我通过 console.log 看到 pageRef.current 对象中的值，这些值在页面渲染后填充。当我尝试返回值时，useEffect 抱怨 - 错误消息说你只能返回一个函数。

这是我正在使用的 Nav 组件（Nav是 App 入口点，页面呈现在PageContainer底部，hookrouter 样式）：

所以我的问题是：

1. 为什么从 useEffect 内部检索 useRef 值，而不是直接访问pageRef.current.value？它不是从 DOM 返回信息，而不是直接更新 DOM 吗？返回一个current.value 副作用？

2. 调整窗口大小时，不会更新 pageRef 的 useEffect 内的值，即使 pageRef 位于 useEffect 应该监视的数组中（？）。

3. pageRef.current.value 在这种情况下返回 a 的函数的示例是什么？

4. 有没有更好的方法来完成我在这里想要完成的事情？

美好的一天，所以我试图在表单 action="POST" 发生之前执行一个中间函数。我首先尝试了两件事 onSubmit={functionName} 但表单总是执行操作，即使在 onSubmit 函数中我返回 false。其次，我一直在尝试使用 useRef 以编程方式分派提交事件，但没有任何反应？我基本上必须进行服务器端调用来获取发布的表单值的配置，不幸的是，我使用的外部 API 需要以这种方式提交表单。请任何帮助将不胜感激。

尝试1：

尝试 2

本质上是想在提交表单或执行表单操作之前对服务器进行一些调用并获取结果。

这是我的反应钩子代码：

我认为它应该渲染两次。第一次 el.current 应该为空，第二次应该指向 div 的 DOM 对象。运行时，这是输出

是的，它确实渲染了两次。但是，第二次渲染 el.current 仍然为空。为什么？

解决方案：如下 Gireesh Kudipudi 所述。我添加了 useEffect

我在 TypeScript 中有以下代码，我试图在其中使用useRef和分配 arrayLength

但它永远不会填充 arrayLength 并作为

ListRef 对象当前：[]

代码有什么问题？为什么它从不采用数组值？

我试图使用 React 钩子建立套接字连接。尝试访问套接字回调函数中的状态变量时，我得到了一个陈旧的值。users套接字回调中的变量没有最新值。使用useRef有效，但不会重新渲染组件。有什么更好的解决方案呢？谢谢！

我正在尝试使用 jest 提交表单，但不确定如何传递字段值。我收到表单错误消息说这些字段是必需的。下面是我的组件。

onSubmit() 不会被调用，因为字段值为空并且thisForm.triggerValidation()返回 formErrors 和字段。我相信我需要模拟 Form 的 useRef，但不确定。下面是测试，我可以单击表单，但正如我所说，我无法通过测试调用 onSubmit() 方法