启用禁用的输入后反应自动对焦输入

Question

我正在尝试使文本输入自动聚焦（在选择相关的单选选项时启用输入）。

在将启用文本输入的选项之间切换时，自动对焦有效。但是，当从禁用文本输入的选项切换到启用文本输入的选项时，自动对焦失败。

• 在下面的示例链接中：

  • 选项1，选项2：禁用文本输入
  • 选项3，选项4：启用文本输入

• 失败案例：

  • 选项1是默认设置
  • 选择选项3或选项4
  • 输入启用
  • 自动对焦失败（寻找可解决此问题的指针）

• 成功案例：

  • 选择选项3
  • 输入已启用
  • 切换至选项4
  • 输入自动

该问题的示例代码在codesandbox上

Answer 1

这不起作用，导致您在setState调用后立即对其进行设置，但是在生命周期的这一点上，该组件尚未重新呈现，并且对输入的引用仍处于禁用状态。

您需要做的是，在componentDidUpdate挂钩中的组件完成更新后触发焦点处理。

这样的东西（伪代码）

componentDidUpdate(prevProps, prevState) {

  if (this.state.enabled) {
     this.inputValue.focus();
  }
}

您可能需要进行其他检查，例如仅关注从禁用到启用的过渡。这可以通过执行以下操作来实现：

componentDidUpdate(prevProps, prevState) {
  if (!prevState.enabled && this.state.enabled) {
    this.inputValue.focus();
  }}

这里是更新的codeandbox的链接：https ://codesandbox.io/s/31RnlkJW4