时间戳

首页 > 解决方案 > 以编程方式关闭 Material-UI Autocomplete popper 结果

reactjs - 以编程方式关闭 Material-UI Autocomplete popper 结果

问题描述

ReactJS/Material-UI 新手问题。我正在使用 Material-UI Autocomplete 并尝试创建一个函数，我可以以编程方式调用该函数来关闭 Material-UI 自动完成弹出器结果列表，但正在努力解决如何做到这一点。到目前为止，我已经在自动完成字段中添加了一个 ref 并尝试触发模糊，因为 popper 已经自动关闭 onBlur 但遗憾的是我收到一条错误消息，指出 onBlur 不是一个函数。非常感谢任何帮助。

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

标签： reactjsmaterial-ui

解决方案

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

你可以在你的组件中创建状态来控制 Autocomplete 组件的 open prop。
转发一个将状态更新到您的自定义选项的功能。

例如，

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} />}
       /* ... */
       />}
    />
  );
}

推荐阅读