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

Question

我尝试自动对焦文本输入（选择相关的无线电选项后启用输入）。

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

• 在下面的示例链接中：

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

• 失败案例：

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

• 成功案例：

  • 选择选项3
  • 输入已启用
  • 切换到选项4
  • 输入为autoFocussed

sample code for the problem on codesandbox

Answer 1

这不起作用，因为你在setState调用之后立即设置它，但是在生命周期的这个时刻，组件没有重新渲染，输入的ref仍然处于禁用它的状态。

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

像这样（伪代码）

componentDidUpdate(prevProps, prevState) {

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

您可能需要进行额外的检查，例如只关注从禁用到启用的转换。这可以通过这样做来实现：

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

此处指向已更新的代码框的链接：https://codesandbox.io/s/31RnlkJW4

Answer 2

添加一些额外的内容，autoFocus仅适用于元素的初始渲染（基本上仅在componentDidMount运行时）。因此，当您重新启用输入时，它不会自动聚焦，它不会被卸载然后重新安装。要使autoFocus正常工作，您需要将输入和禁用输入移动到单独的组件中，并根据状态有条件地呈现它们。