问题标签 [react-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 回答
1482 浏览

reactjs - 如何将访问方法 dispatch() 获取到类的组件中

下午好!我开始处理react-redux并在某一时刻陷入困境。我不知道如何访问dispatch组件本身内部的方法。问题是,我正在尝试从表单字段中获取数据。在mapDispatchToProps方法中,我无法得到refs. 请告诉我如何正确执行此操作?

例如:index.js

代码是在这里输入的,可能在语法中打错了... App.js

0 投票
1 回答
14001 浏览

javascript - 如何在 React Native 中使用 React.forwardRef()

我正在使用refs访问子组件

并打电话给他们

我收到以下错误

警告:不能给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗?

0 投票
1 回答
483 浏览

reactjs - useRef 在动态上下文中,其中 ref 的数量不是恒定的,而是基于一个属性

在我的应用程序中,我有一个“芯片”列表(每个 material-ui),并且在单击删除按钮时应该执行删除操作。该动作需要参考芯片而不是按钮。

一个天真的(和错误的)实现看起来像:

然而,正如所说,这是错误的,因为 react 期望所有钩子总是以相同的顺序,并且(因此)总是具有相同的数量。(上面实际上可以工作,直到我们在 for 循环下面添加一个状态/任何其他钩子)。

这将如何解决?或者这是功能组件的极限?

0 投票
3 回答
922 浏览

reactjs - 在 React 中安装组件后如何创建 Refs?

我的案例要求我对我拥有的每个时间选择器都使用 React.createRef() (时间选择器中有某些功能只能通过 Refs 使用)。

安装页面后,我最初有 2 个时间选择器。当我只有两个时,一切都很好,但我的工作被毁了,因为我需要使用按钮添加/删除时间选择器。所以我可以很容易地添加时间选择器。

但现在我的问题是如何创建 refs ?我对 React.createRef() 的声明位于前 2 个参考的 Constructor(){} 中。
问题是我在哪里实例化添加 onClick 的时间选择器的参考?

谢谢

0 投票
1 回答
751 浏览

reactjs - 使用 React 在 Google 地图中添加和删除多个多边形 - 让 Refs 正确

我正在使用 google-map-react(不是 react-google-maps),并且能够通过在我的主组件中调用函数 polygonDraw 来插入多边形(不使用 drawingManager)。我的函数 polygonDraw 如下所示。

我可以通过在我的 polygonDraw 函数中添加 polygon.setMap(null) 来立即删除最新的多边形。

但问题是: 我无法删除以前添加的多边形或所有多边形。我需要能够删除所有多边形并在不依赖事件处理程序的情况下执行此操作(例如多边形上的单击事件)。

我尝试了不同的方法,但没有成功实施,包括:我无法构造一个多边形组件来呈现新的 google.maps.Polygon({.etc.}) 对象(基于状态/道具)。

因为我能够使用我的 polygonDraw 函数插入多边形,所以我目前对策略的思考是:为每个添加的多边形建立一个参考。我尝试实现 React 引用,包括 Callback refs 和使用 React.createRef。但没有成功。我的 polygonDraw 在主要组件内,但在渲染之外。我不知道是否可以建立和存储对每个添加的多边形的引用,因此可以为每个多边形调用 reference.setMap(null)。如果可能的话,我不知道如何建立引用(构造函数内的代码?polygonDraw 内的代码?渲染内的代码,包括 GoogleMapReact?)

任何帮助/建议表示赞赏:-)


0 投票
1 回答
52 浏览

javascript - 定位/滚动到不是亲密父/子的 React 组件

我有一种情况,我想从另一个不是直接或密切的父/子关系的组件滚动到一个 React 组件。

该结构可以解释如下:

如您所见,它根本不是直接的。如果关系是直接的,甚至是祖父母/孙子,我通常会通过参考。但是在这种情况下,我需要通过 10 个左右的文件传递 ref 才能访问它,这似乎很荒谬。

我知道我可以使用document.getElementById(或类似的),但想知道是否有办法通过 ref 或 React 中的类似方法来做到这一点?

0 投票
1 回答
269 浏览

javascript - ref.current.scrollLeft 返回未定义

我有一段代码:

当我myRef用于List组件时,myRef.current.scrollLeft/myRef.current.clientHeight返回undefinedmyRef.current返回正确的组件节点)。如果我使用myRef一切div.App顺利。可能是什么问题呢?

0 投票
2 回答
5989 浏览

reactjs - React > 如何在使用 react-table 添加新行后将焦点设置在输入字段上

我决定用它react-table来构建网格。

拥有更好的 UI 只是一件事,那就是我想在单击添加新按钮后专注于新项目的输入字段。

我打算使用ref但不知道如何fowardRef使用子项

这是我使用 react-table 的示例:

https://codesandbox.io/s/beautiful-proskuriakova-lpfxn

在这种情况下,我想First Name在添加新行后专注于该字段。

在此处输入图像描述

更新: 我可以通过使用autoFocus原生 HTML 的支持来专注于输入。

答案在这里

但我仍然想通过使用来处理焦点React Ref

0 投票
0 回答
328 浏览

javascript - React Native:为什么组件引用未定义?

我的 React Native 应用程序中有以下代码:

这是一个包含<Toolbar>在顶部和<ComponentForm>下方的屏幕。当屏幕加载时,回调 in<ComponentForm>被调用,并且connectView是我期望的对象。但是,当我单击 中的Submit按钮时<Toolbar>,它会调用它的回调,表明它this.cFormundefined.

所以问题是this.cForm屏幕加载时确实设置了,但是当我单击时Submitthis.cForm它是未定义的。

任何人都知道我可以如何进行调试吗?

0 投票
1 回答
175 浏览

react-native - React Native StackNavigator Reference Null on Props

我正在使用@react-navigation/stack在我们的应用程序上使用它。我们有一个问题,在导航到 Detail 组件后,我们需要导航回 Main 组件,Detail 组件有一个 Reference 用于输入以将焦点放在挂载上。

所以我们有这个。

所以 moveUpdate 导航到“搜索”,在搜索时我们有这样的东西:

当我再次调用 onPress 去 Barcode 时,我得到:

TypeError: undefined is not an object (_this.input.current.focus)

我不知道引用是否没有正确声明。

有什么建议吗?

在此处输入图像描述