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

Question

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

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

在下面的示例 link 中：
- 选项 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();
  }}

此处 link 到更新的代码框：https://codesandbox.io/s/31RnlkJW4

Answer 2

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

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

React autofocus input after enabling a disabled input

autofocus

reactjs