reactjs - 阻止 React-select 在右键单击时打开它的菜单（onContextMenu）

Question

我有这个代码结构：

2 React select 用 div 包裹，（它位于元素上，然后映射到列表上）

<div onContextMenu={openContextMenu}>
 <Select />
 <Select />
</div>

问题是当我单击鼠标右键打开上下文菜单时，选择菜单正在打开！据我了解React-select使用onMouseDown事件打开是下拉菜单

如何防止它打开？

Answer 1

编辑：我有一个解决方案！

1. <Select />使用menuIsOpenprop进行控制。
2. 利用onClick事件（仅注册左键单击）

export const ControlledSelect = (props) => {
  const ref = useRef(null);

  const [ visible, setVisible ] = useState(false);

  useOutsideClick(ref, () => {
    setVisible(false);
  });

  const handleClick = () => {
    setVisible(true);
  };

  return (
    <div ref={ ref } onClick={ handleClick }>
      <Select { ...props } menuIsOpen={ visible } />
    </div>
  );
};

还有一个自定义useOutsideClick钩子，当您在组件外部单击时会运行回调。

export function useOutsideClick(ref, callback) {
  const handleClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  });
}