如何实用地打开反应选择菜单

Question

我想通过单击按钮打开反应选择菜单。

这是代码沙盒的链接

https://codesandbox.io/s/material-demo-kssrb

我知道一个反应选择属性“menuIsOpen”，该属性的缺点是菜单始终打开，并且因此丢失了默认关闭行为。

任何帮助表示赞赏。

Answer 1

您可以尝试存储对组件的引用，并.focus()对其调用 a 。并传递给 React Select prop openMenuOnFocus。

codesandbox 上的示例：https ://codesandbox.io/s/react-select-hooks-forked-qol5m

简短精髓：

  const selectRef = useRef();
  const onClick = () => {
    selectRef.current.focus();
  };

    <Dropdown
      openMenuOnFocus={true}
      ref={selectRef}
    />

Answer 2

除了menuIsOpen属性之外，您还需要onBlur事件来使其变得模糊。

由于menuIsOpen属性确实重置了 Select 组件的所有 on-* 事件。

此外，为了使onBlur工作，您需要使用setFocus将焦点设置到下拉元素。

你可以在这里检查一下。 https://codesandbox.io/s/material-demo-gxvxr