问题标签 [use-ref]

我已经使用了来自 react 的 useRef 钩子

并将其传递给 material-ui OutlinedInput 组件

当我尝试在 useEffect 中设置输入的属性时

我明白了

未捕获的类型错误：无法设置未定义的属性“目录”

我有一个输入标签，当我按下转义键时，我希望输入元素上的焦点消失，这意味着不再有文本光标或任何焦点样式（当用户键入时，他们的输入不会进入输入标签）。

下面的代码是我实现上述功能的尝试，但它没有按预期工作。我想让这段代码按预期工作。

我已经测试了该onEscape函数，并且在将其他操作传递给它时它可以工作（当用户按下转义键时，它会执行已传递给 onEscape 函数的任何函数）

我需要用按钮制作一个样式组件 div，按钮生成 div 的大小。然后嵌套在 div 组件内的组件显示大小。它必须使用 forwardRef 并且两个组件都必须正常工作。

基本组件代码：

该组件是一个简单的样式组件 div，其宽度和高度来自道具。得到 ref 就好了，我可以在控制台中打印它，它确实显示了元素的当前大小。但是，当我尝试通过 innerRef.current.offsetWidth 获取宽度/高度值时，它会得到上一代的结果。这是代码：

我会很感激任何帮助，我一直在寻找答案太久了，这真的不应该是那么艰巨的任务......

我有一个 ContentEditable 组件数组，我想从中获取值并将其显示在它旁边的适当容器中。我的挣扎是我认为我需要一组 useRef 来定位特定的 ContentEditable 组件并将正确的 e.target.value 设置为正确的 inputRef.current

https://codesandbox.io/s/blissful-bouman-bqpts?file=/src/InputList.jsx

我对以下使用 useRef 来存储先前的状态值感到困惑。本质上，它如何能够正确显示先前的值。由于 useEffect 依赖于“value”，我的理解是每次“value”发生变化（即当用户更新文本框时），它会将“prevValue.current”更新为新键入的值。

但这似乎不是正在发生的事情。在这种情况下，步骤顺序是什么？

我试图创建一个 HOC 来获取ref任何组件。

当我通过正常的 jsx 时，效果很好。但是当我传递一个功能组件时它不起作用：

演示

<InlineEditInput/>用户在组件上按 Enter 后，我尝试实现 focus()<br> 尝试使用 useRef 但无法正常实现<br> 库react-continentable

我的这张表是这样的：

在进行代码审查时，我遇到了这个自定义钩子：

这个钩子是这样使用的：

基本上，与const f = useCallBack(() => { // do stuff }, [dep1, dep2])此相比，避免声明依赖项列表并且f永远不会更改，即使其中一个依赖项发生更改。

我不知道如何看待这段代码。我不明白使用useLastVersion相比有什么缺点useCallback。

我正在使用 ref 为滚动上的元素设置动画。

此代码在 next.js 应用程序中运行良好。但是当我在create-react-app类型脚本模板中使用它时，它抱怨说Object is possibly 'null'.

很明显，如果ref.currentif (!ref.current) return;不存在，程序将被返回。但是 TypeScript 仍然在下一行给出错误ref.current.getBoundingClientRect()，指向ref.

如何在不从 typescript 配置中删除 null 检查的情况下解决此问题？

完整文件 - https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx

这是完整的项目回购 - https://github.com/mayank1513/react-contact-app

到目前为止，我已经绕过了"strict": false在 tsconfig 中使用的问题。但需要在严格模式下进行。

此文件中也存在类似问题。即使"strict": false在 tsconfig 中设置也无法解决此问题。现在我只是依靠document.getElementById()- 大约第 65 行