Question

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

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

Answer 1

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

您可以在组件中创建状态来控制 Autocomplete 组件的 open prop。
将状态更新为您的自定义选项的 forward 函数。

例如

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

Answer 2

我能够通过使用 popper 的“anchorEL”属性来实现这一点，详见 [https://material-ui.com/components/popper/][1]

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

2 个答案: