React refs：无法读取 null 的属性“焦点”

Question

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

我的目标是能够GrandChildInput通过单击 div 中的 div来专注于组件内部的输入ChildInput。然而，当ChildInput被呈现，价值this.childRef.current是null，它仍然如此，直到我手动对焦输入点击进去。之后，current正在分配的值。

您可以在控制台中跟踪此转换。该this.childRef.current日志出现一次，但它的价值变动后手动着眼于输入通过点击它。

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

• 反应 16.4.2
• 样式组件 3.4.2

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

单击 ChildInput 时，如何使应用程序专注于 GrandChildInput 组件div？

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>

另外，如果您想知道为什么您的方式不起作用。这是因为没有任何东西导致再次调用渲染方法，因此在 ref 已分配并可用后，将正确的函数分配给 onClick。

工作代码沙盒