antd Dropdown：停止传播点击触发器答案

【问题标题】：antd Dropdown: Stop Propagation of Click Triggerantd Dropdown：停止传播点击触发器
【发布时间】：2021-06-15 07:25:30
【问题描述】：

我正在寻找一种方法来stopPropagation() 具有唯一“点击”触发器的 antd Dropdown 组件的点击事件。

这是一个 Dropdown 示例，其中打开/关闭单击事件被传播到父 Collapse 标头，这会导致 Panel 折叠/展开，这是不希望的：

https://codesandbox.io/s/stop-propagation-dropdown-trigger-click-cg005

Screenshot

请注意，按钮和菜单项的单击事件可以在各自的事件处理程序中停止传播。

我正在寻找的是如何为下拉点击事件（点击“⋯”部分）做同样的事情，这似乎并不容易访问。

【问题讨论】：

已尝试解决此问题，但尚无解决方案。有趣的问题。
如果您没有找到解决方案，您可能需要自己控制下拉菜单的打开状态。
@mleister 是的，我也是这么想的。我希望以某种方式避免这种情况...... :)

标签： antd

【解决方案1】：

为<Dropdown trigger={["click"]}> 的直接子级提供onClick={e => e.stopPropagation()} 回调应该可以解决问题。 Tt 为我工作：

return (
            <Dropdown trigger={["click"]} overlay={actionsMenu}>
                <div onClick={e => e.stopPropagation()} className="action-button-container">
                    <MoreOutlined />
                </div>
            </Dropdown>
        )

【讨论】：

【解决方案2】：

@shimikano，对于您的特殊情况，您可以使用组件中的 buttonsRender 属性覆盖按钮。 buttonRender 是一个函数，它接收一个内部包含 2 个 ReactNode 元素的数组，第一个是实际按钮（在您的情况下名为 Dropdown），第二个是更多图标，您可以使用您可以访问的相同图标覆盖它并且可以提供 onClick 回调并在里面调用 event.stopPropagation()

buttonsRender={buttons => {
    buttons[1] = <MoreOutlined onClick={e => e.stopPropagation()} />;
    return buttons;
}}

下面是折叠标题的样子：

const header = (
        <Space wrap>
            <Dropdown.Button
                size="small"
                trigger={["click"]}
                onClick={handleButtonClick}
                overlay={menu}
                buttonsRender={buttons => {
                    buttons[1] = <MoreOutlined onClick={e => e.stopPropagation()} />;
                    return buttons;
                }}
            >
                Dropdown
            </Dropdown.Button>
        </Space>
    );

【讨论】：