问题标签 [use-ref]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
979 浏览

javascript - 如何在 UseEffect 中将事件侦听器添加到 UseRefs

我想eventListener在我的 React 组件中添加一个节点。我正在选择带有useRef钩子的节点。我是useCallback因为它useRefnull第一次渲染。

我的问题是我对裁判useEffect所做的任何更改都没有反应。offeringContainer意思是,offeringContainer.currentnull

这是我的 JSX:

我知道我做错了什么,但我的 useEffect 钩子应该监听来自offeringsContainer.current.

0 投票
2 回答
362 浏览

javascript - 重载与 useRef 不匹配

重载不匹配

错误:

图片:

在此处输入图像描述

0 投票
4 回答
1102 浏览

reactjs - 使用 useState 或 useRef (React) 将值清除到输入中

我得到了钩子

然后我有表格:

和方法:

setMyName("")它不起作用 - 我仍然看到输入中的价值。

0 投票
1 回答
32 浏览

reactjs - 如何删除功能组件中的所有旧元素

获取后我需要使用 h1 删除所有旧 div:

更新。这是 fetch(返回正确的数据):

有输入:

我试过 useRef 并删除父元素

0 投票
1 回答
918 浏览

reactjs - 如何将 ref 传递给邻居组件

我试图在我的 Header 组件中的搜索输入上使用 ref ,这不是我的 ResultsList 组件的高阶组件。我想将焦点放在来自 ResultsList 组件的 Header 的搜索输入上。标题很直观,因为我所要做的就是下面。如果我想在 ResultsList 中创建一个专注于 Header 中的输入元素的按钮怎么办?我如何通过这个参考?我已阅读有关 forwardRef 的信息,但我没有将我的 ref 转发。ResultsList 不是 Header 的子级。

我的 App 组件看起来像这样

0 投票
1 回答
1733 浏览

reactjs - ReactJs:为什么 ref.current 在渲染组件时返回 null?

我在购物车中有一个按钮,我想在购物车打开时给它一个动画。为了定位它,我使用了 useRef 并尝试在控制台中登录结果:

问题是当我打开购物车时 current 为空,只有在我关闭购物车时才返回实际​​按钮,我希望它是相反的。任何想法?

完整的组件代码

0 投票
0 回答
444 浏览

javascript - 如何使用 useRef 滚动到组件 onPress

这是一个简单的问题,我只是找不到可以处理这个问题的方法。

  1. 我像这样声明使用 ref 变量:

  2. 现在我在页面顶部有 Text 组件:

3.我在底部有另一个按钮,我希望在单击按钮时,将用户一直带到 Text 组件。在我的底部按钮中,我有:

我试过了:

和:

但我总是得到:TypeError:massageTypeRef.current.scrollIntoView 不是函数。(在“massageTypeRef.current.scrollIntoView()”中,“massageTypeRef.current.scrollIntoView”未定义)

0 投票
1 回答
2136 浏览

reactjs - 为什么获取 scrollIntoView 不是函数

这是一个简单的问题,我只是不明白为什么我得到“不是很多 ref 函数的函数。

  1. 我像这样声明使用 ref 变量:

  2. 现在我在页面顶部有文本组件:选择类型:3.我在底部有另一个按钮,我希望当单击按钮时,将用户一直带到文本组件。在我的底部按钮中,我有:

我尝试了很多方法,例如:

和:

但我总是得到:TypeError:massageTypeRef.current.scrollIntoView 不是函数。(在“massageTypeRef.current.scrollIntoView()”中,“massageTypeRef.current.scrollIntoView”未定义)


我在世博会上做了一个小吃来展示我想做的事,由于某种原因,工作很完美,当我在我的项目中做同样的事情时,它给我的信息是“不是一个功能......”这是小吃https ://snack.expo.io/OYWlNQwP4

这里链接到我的 github 组件和项目:https ://github.com/roeigr7/LIOR/blob/main/src/screens/MeetingPickerScreen.js

0 投票
1 回答
90 浏览

reactjs - 在 React useEffect 中减小大小时,窗口调整大小不起作用

我在 React 中有以下 useEffect 调用:

我要做的是获取包装胜利图表的 div 的宽度并将其传递给图表,以便它可以调整其纵横比以启用具有固定高度的灵活宽度:

由于某种原因,useEffect 块中的“宽度”仅在窗口大小增加时更新。当它减小时,宽度保持不变。

难道我做错了什么?

非常感谢!

0 投票
1 回答
619 浏览

reactjs - 如何将 SignaturePad 与 React TypeScript 一起使用

我正在尝试在我的反应项目中实现 SignaturePad,我可以绘制签名,但我无法访问属性以清除它或保存它。我在 ref={signCanvas} 以及 current.clear() 和 signCanvas.current.clear() 和 signCanvas.getTrimmedCanvas().toDataURL("image/png") 上收到以下错误

没有重载匹配此调用。

这是我迄今为止实施的,任何帮助将不胜感激。