React refs：无法读取 null 的属性 'focus'

Question

我的应用程序中有这种情况：https://codesandbox.io/s/14mq9969j3

我的目标是能够通过单击 ChildInput 中的 div 来专注于 GrandChildInput 组件内的输入。然而，当 ChildInput 被渲染时，this.childRef.current 的值为 null，并且它一直如此，直到我通过单击它手动关注输入。之后，正在分配 current 的值。

您可以在控制台中跟踪此转换。 this.childRef.current日志出现一次，但在通过单击手动聚焦输入后其值发生变化。

我的最终目标是让 StyledGrandChildInput 以这种方式工作，但作为中间步骤，我试图让无样式的组件工作。我能够在我的本地项目中实现这个结果（使用无样式组件）：

反应 16.4.2
样式组件 3.4.2

但是当谈到在 CodeSandbox 中使用通过上面 link 安装在项目中的版本时，出于某种原因，即使专注于非样式化的 GrandChildInput 组件也不起作用。

如何在点击 ChildInput 的 div 时让应用程序聚焦到 GrandChildInput 组件？

Answer 1

当您尝试使用 ref 将 onClick 处理程序分配给 div 时，它将尝试立即从 ref 访问 handleFocus，但由于它尚未分配给输入组件。它的值将为空，因此您会收到该错误。

就打印的值而言，在控制台中是正确的，这与控制台如何评估该值有关。 This answer 将提供更多详细信息

因此，为了解决您的问题，您需要做的是通过包装在另一个函数中来调用 handleFocus 函数，以便仅在点击时对其进行评估

<div
    onClick={() => this.childRef.current.handleFocus()}
    style={{ border: "1px solid black", padding: 5 }}
  >
    click me
    <GrandChildInput
      type="text"
      disabled
      focused
      length={5}
      ref={this.childRef}
    />
  </div>

另外，如果您想知道为什么您的方法不起作用。是因为没有导致再次调用 render 方法，所以在 ref 被分配并可用后，正确的功能被分配给 onClick。

Working CodeSandbox

Answer 2

对于那些在执行相同操作时遇到困难但当 GrandChildInput 是 styled-component 且 styled-component 的版本低于 4.

通过他的实施，您可能会得到 Uncaught TypeError: _this.childRef.current.handleFocus is not a function。

在这种情况下，将样式组件上的 ref 属性重命名为 innerRef 这样：

<div
onClick={() => this.childRef.current.handleFocus()}
style={{ border: "1px solid black", padding: 5 }}
>
  click me
  <StyledGrandChildInput
    type="text"
    disabled
    focused
    length={5}
    innerRef={this.childRef} // change
  />
</div>

Answer 3

请给React.forwardRef()一个阅读。

这允许将来自父级的引用作为次要参数向下传递（其中第一个参数是道具）。然而，它并没有多大帮助...这就是我目前正在努力解决的问题，哈哈...

React refs：无法读取 null 的属性 'focus'

React refs: Cannot read property 'focus' of null

javascript

reactjs

styled-components

React refs：无法读取 null 的 属性 'focus'

React refs: Cannot read property 'focus' of null

javascript

reactjs

styled-components

React refs：无法读取 null 的属性 'focus'