以编程方式使 Material UI 自动完成设置焦点答案

【问题标题】：Make Material UI Autocomplete get focus programatically以编程方式使 Material UI 自动完成设置焦点
【发布时间】：2021-03-17 06:56:45
【问题描述】：

我正在开发一个项目，该项目结合了 react-datasheet 和 Material UI Autocomplete 来模拟 Excel 单元格内的下拉菜单。基本要求包括允许用户在自动完成获得焦点时输入或选择其中一个选项。这就是我的问题所在。 Because the autocomplete is nested inside a cell, it does not get focus automatically when the parent cell is selected (for example, using the keyboard arrows).

到目前为止，我尝试使用 refs，以便能够使用类似以下的方式调用 .current.focus()：

const inputRef = useRef();
useEffect = (() => {
  if (selected) {
    inputRef.current.focus();
  }
}, [selected]);

selected 是一个布尔属性，我从父单元格传递到自动完成。换句话说，当selected 是true 时，我正试图以某种方式使其以编程方式获得焦点。如果您有任何提示或想法可以使其发挥作用，或者我可以研究的其他潜在方法，我将不胜感激。

编辑：这是 React 开发工具中显示的组件树。检查自动完成后，它不会公开focus() 方法。我看到树下有输入，但我不清楚如何将焦点放在它们上，以及这是否会导致自动完成获得焦点。

父（实际上是祖先）单元组件。这是我有 selected 道具的地方。
Material UI 自动完成。
输入

【问题讨论】：

inputRef 是什么？如果是自动补全组件，inputRef.current.focus() 可能没有你想要的效果。您必须找到实际的<input/> 元素并将焦点放在它上面。例如：inputRef.current.querySelector('input').focus().
@Titus 我编辑了我的问题。请让我知道我是否正确解释自己或您是否需要更多信息。我只混淆了名称与公司或项目本身相关的组件。

标签： javascript reactjs material-ui

【解决方案1】：

@newdev 我遇到了同样的问题，@Dekel 在这里的回答帮助解开了这个谜团：react material ui autocomplete element focus onclick。

TLDR：您需要将 ref 添加到 Autocomplete 的 renderInput 属性中的 TextField 元素。

【讨论】：

非常感谢@Fabio B！成功了。