异步调用后如何自动对焦选择输入？

【问题标题】：How to autofocus select input after async call?异步调用后如何自动对焦选择输入？
【发布时间】：2020-06-12 15:00:12
【问题描述】：

我正在使用Material UI's Autocomplete 组件，但遇到了问题。我在用户开始输入时进行了去抖动 API 调用，并且在执行调用时禁用了文本输入字段。

问题是禁用然后启用文本字段会使文本输入失去焦点。我已经尝试给它一个 ID 并在 DOM 中获取它并运行 .onFocus()，但是 a) 没有工作并且 b) 不是很 React-y。

我也尝试添加一个useRef 钩子，但这也没有用。

有什么想法/建议吗？

Codesandbox

【问题讨论】：

您无法专注于禁用的输入字段，您可以添加您的代码吗？
这不是问题，问题在于启用后如何重新聚焦输入字段。
@zb22 您可以查看我添加的沙箱，我尽可能将问题复制到我的实际代码中。
你试过yourRef.focus()

标签： javascript reactjs material-ui

【解决方案1】：

嘿，您可以添加 inputRef 属性，然后等待它完成加载。示例如下：

const inputComponent = React.useRef(null);

return (
    <Autocomplete
      {/* ... */}
      renderInput={params => (
        <TextField
          {/* ... */}
          InputProps={{
            {/* ... */}
            inputRef: inputComponent,
            {/* ... */}
          }}
        />
      )}
    />
  );

然后我猜测您尝试在元素仍处于禁用状态时对其进行聚焦，我猜是有点竞争条件。您可以像这样添加依赖于open 和loading 的useEffect：

React.useEffect(() => {
    if (!loading && open) {
      inputComponent.current?.focus();
    }
}, [loading, open]);

这是指向sandbox 的链接。干杯，希望对您有所帮助。

P.S 我不认为在加载选项时禁用该字段是一个好主意，它不会让用户感觉流畅:)

【讨论】：

太棒了！感谢您的建议，我可能会使用它。