以编程方式关闭 Material-UI 自动完成弹出结果

Question

ReactJS/Material-UI 新手问题。我正在利用 Material-UI 自动完成功能，并尝试创建一个函数，我可以通过编程方式调用该函数来关闭 Material-UI 自动完成弹出器结果列表，但在如何执行此操作方面遇到了困难。到目前为止，我已经向自动完成字段添加了一个引用，并尝试触发模糊，因为弹出器已经自动关闭 onBlur，但遗憾的是我收到一条错误消息，指出 onBlur 不是函数。非常感谢任何帮助。

const closePopper = () => {    
    myAutocompleteFieldRef.current.onBlur();
  };

Answer 1

切换到在受控模式下实施 AutoComplete 元素。

您可以在组件中创建状态来控制自动完成组件的 open 属性。
转发功能将状态更新为您的自定义选项。

例如，

export default function CustomAutoComplete() {
  const [open, setOpen] = useState(false);
  const closePopper = () => setOpen(false);
  const openPopper = () => setOpen(true);
  return (
    <Autocomplete
      id="controlled-open-sample"
      open={open}
      onOpen={openPopper}
      onClose={closePopper}
      renderOption={opt => <CustomLocationOption {...opt} afterSelect={closePopper} />}
       /* ... */
       />}
    />
  );
}