问题标签 [refs]

在 componentDidMount 函数中我可以使用 this.refs['test'] 获取这个组件，但是使用 this.refs['list'] 会出错。我尝试使用 'ref={list=> { this.list = list}' 为组件添加一个 ref，并使用 'this.list' 来获取组件，这也是一个错误。那么我可以得到谁的组件。

我正在使用两个组件并且我正在使用这种模式：子组件应该尽可能地保持隔离 - 它正在处理自己的验证错误。父组件应检查子组件之间存在依赖关系的错误。所以，就我而言：password字段和password confirmation字段。

这是我的代码：

a) 注册（父母）

设置初始状态。

在render()方法中，我正在输出我的子组件。通过 prop 调用callback我正在isPasswordMatching()通过绑定 parent 的this. 目标是可以在子组件中调用该方法。

isPasswordMatching()方法是检查密码是否匹配（通过 refsthis.password和this.passwordConfirm），然后更新状态。请注意，此方法在子项内部调用（密码或密码确认）。

b) 文本输入（子）

设置初始状态。

完成模糊验证并更新状态。

最新的。回调道具被调用。

问题

不知何故，我的裁判丢失了。设想：

1. 父组件是渲染器
2. 子组件被渲染
3. 我正在输入一个输入字段并退出（这会调用onBlur()方法） - 状态得到更新，子组件被渲染
4. componentDidUpdate()被调用，prevProp.callback()以及
5. 当使用isPasswordMatching()我正在输出的方法时this.password，this.passwordConfirm它们是具有预期参考值的对象。更新父组件的状态 - 组件被渲染。
6. this.password然后再次渲染所有子项，更新组件，调用回调，但这次this.passwordConfirm是null。

我不知道为什么参考文献有点丢失。我应该做一些不同的事情吗？先感谢您。

如果我有一个像这样的组件：

我想设置另一个组件来使用它的 ref 访问该值，有没有办法做到这一点？

这不起作用，因为似乎 refs 没有延续到 App 类。

我正在尝试更改div颜色值更改时的背景。这是我接收颜色值的函数：

这是css类

这是我的 div 元素，其背景需要在运行时更新。

我不确定 refs synatx 所以请帮助解决这个问题。谢谢。

我正在使用 react-three-renderer ( npm , github ) 来构建一个带有three.js的场景。

我遇到了一个归结为 MVCE 的问题。Refs 没有按照我期望的顺序更新。首先，这是要查看的主要代码：

这会渲染一个带有绿色框的基本场景，这是 react-three-renderer 的 github 登录页面上示例的一个分支。左上角的按钮将场景中的形状切换为蓝色圆圈，如果再次单击，则返回绿色框。我在 ref 回调和componentDidUpdate. 这就是我遇到的问题的核心所在。第一次单击切换按钮后，我希望形状的 ref 指向圆。但正如您从日志中看到的那样，在componentDidUpdateref 中仍然指向该框：

componentDidUpdate：活动形状是框

之后登录行显示 ref 回调被命中

box ref null [React 在旧 ref 上调用 null 以防止内存泄漏]

圆参考 [object 对象]

您可以放入断点以进行验证和检查。我预计这两件事会在我们进入之前发生componentDidUpdate，但正如你所看到的，它正在反过来发生。为什么是这样？react-three-renderer 中是否存在潜在问题（如果有，您可以诊断它吗？），还是我误解了 React refs？

MVCE 在这个 github 存储库中可用。下载它，运行npm install，然后打开 _dev/public/home.html。

提前致谢。

我有一个通用的 React + Redux 应用程序，它在服务器端呈现第一个屏幕页面，然后浏览器端 ReactJS 将完成其余任务。

目前我遇到了一个问题，我无法使用 1. this.refs[xxx] 2 访问 refs。ref={(ref) => this.xxx = ref}

我需要在用户滚动页面并对该元素执行某些操作时获取 ReactDom 元素。但是如果我只能访问 componentDidMount() 中的 refs，我该如何实现呢？

谢谢。

首先让我说我理解你永远不应该使用 refs。

话虽如此，我认为在我的情况下这是非常有效的。具体来说，我使用的是 window.onscroll 处理程序，不能简单地更改 onscroll 处理程序中的道具。在 onscroll 处理程序中更改状态或道具会过于频繁地重新呈现子组件，这会导致过多的延迟。

因此，由于我的场景只需要在滚动时设置元素的样式（即，当页面滚动到视图之外时，我会在页面顶部粘贴一些东西），因此只需设置即可获得 0 延迟this.refs.myelement.style.position = 'fixed'

我的问题是我目前正在做：

this.refs.childelement.refs.childschildelement.refs.childschildschildselement.refs.style.position = 'fixed'

基本上，我的onscroll handler3 位父母都对我想要设计的实际元素提出了意见。

我的页面由一个List组件组成。这由ReadOnlyOrEditable组件组成。可编辑组件是RichTextEditors具有组件的Toolbar组件。当窗口滚动事件发生时Toolbar ，我需要将位置设置为固定。

因此，在一个页面上，我将有大约 10 个ReadOnlyOrEditable组件，其中可能有 5 个是RichTextEditors，每个组件都有一个Toolbar.

工具栏有斜体、粗体等按钮。

当用户向下滚动时，如果工具栏消失，我们不希望用户必须向上滚动。也就是说，如果工具栏不在视野范围内，我们希望将位置设置为固定，以便用户可以立即点击斜体/粗体/等。

那么如何在不必自上而下传递 refs 的情况下让它变得更好呢？我现在拥有它的方式非常丑陋......

我更喜欢让 onscroll 处理程序靠近列表的位置，因为在每个 Toolbar 组件中都有 window.onscroll 处理程序意味着我正在设置多个 window.scroll 处理程序，这在浏览器上是不必要的工作。

欢迎任何建议。

我开始学习 React。不同网站的一些人告诉大家，使用 refs 是一种不好的做法（是的，完全使用它们）。

真正的处理是什么？我将它附加到子组件（这样我可以访问内部的东西）是不是很糟糕？

谢谢！

我在 handleSubmit 函数中访问 this.refs 时遇到问题。

我的容器如下所示：

当我单击提交按钮时，handleSubmit 将始终记录一个空对象（即使输入在 html 中正确呈现）。我注意到我可以在 componentDidUpdate 方法中访问 this.refs 没有任何问题。

为什么在 handleSubmit 中访问 this.refs 不起作用？

我目前正在使用 React 开发价格标签的功能。这些组件的主要功能是让用户将其中一个价格类添加到购物车中。问题是如何获取 HTML 标签的 html 字符串？我的示例代码是

还有什么方法可以绑定一个按钮事件来检测所有值吗？非常感谢您的帮助...