reactjs - 启用禁用输入后响应自动对焦输入

Question

我正在尝试自动聚焦文本输入(选择相关单选选项后启用输入)。

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

• 在下面的示例链接中:

  • 选项 1、选项 2:禁用文本输入
  • 选项 3、选项 4:启用文本输入

• 失败案例:

  • 选项 1 为默认
  • 选择选项 3 或选项 4
  • 输入已启用
  • 自动对焦失败(寻找指针来修复此行为)

• 成功案例:

  • 选择选项 3
  • 输入已启用
  • 切换到选项 4
  • 输入自动聚焦

sample code for the problem on codesandbox

Answer 1

这不起作用，因为您在 setState 调用后立即设置它，但在生命周期的此时，组件尚未重新渲染，并且对输入的引用仍处于禁用状态。

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

类似这样的东西(伪代码)

componentDidUpdate(prevProps, prevState) {

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

您可能需要额外的检查，例如仅关注从禁用到启用的转换。这可以通过执行以下操作来实现:

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

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