即使我单击页面上的某个位置，操作菜单也不会关闭，直到我再次明确单击"操作"按钮，菜单才会打开

Question

//This is dropdown component
const Dropdown: FC<any> = ({ list, item, title },props) => {
const isDisabled = item && item.users.length > 0 ? false : true;
const [show, setShow] = useState(false);
const toggleMenu = () => {
setShow(!show);
};
return (
<div>
<Button
title={title || "Action"}
onClick={toggleMenu}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary" 
/>
)

即使我点击页面上的某个地方，动作菜单也不会关闭保持打开状态，直到我再次明确单击"操作"按钮。

Answer 1

如果你想在点击页面上的任何位置时关闭操作菜单，使用onClick是没有帮助的。使用onBlur并在按钮上使用它作为-

<Button
title={title || "Action"}
onClick={toggleMenu}
onBlur={() => setShow(true)}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary" 
/>

或者，你可以做的是-

• 创建对外部div的引用
• 每当此组件出现在屏幕上时(例如，装载(，请将事件侦听器mousedown(或单击(添加到文档中，并且也不要忘记在卸载时删除该事件
• 在事件内部(handleClick(this.{Any ref name you give}.contains(e.target)将返回true，如果您所单击的内容位于"节点"引用内部
• 现在你有了它，你可以随心所欲，关闭模态，关闭下拉菜单列表，任何事情都可以

以上4点摘自文章-https://medium.com/@皮蒂帕多普/little-neat-tick-to-capture-click-outside-act-component-5604830beb7f。