javascript - 手动关闭 AntD 菜单

问题描述

我在其中实现了一个表格，antd并且在每一行中都有一个下拉菜单，当单击一个菜单项时，会出现一个模式。另外，我也使用onRow了单击表格行。因此，为了防止在单击我在菜单项单击时使用stopPropagation的菜单项时触发 onRow 单击触发。一切正常，但问题是因为我stopPropagation在菜单项点击上使用过，当模式出现时，下拉菜单没有关闭。只有当我点击它关闭的某个地方时。我该如何解决这个问题？

我的列与下拉

{
      title: "",
      key: "operation",
      fixed: "right",
      width: 40,
      className: "action-button",
      render: (value: any, row: any, index: any) => {
        return (
          <Dropdown
            overlay={menu}
            trigger={["click"]}
          >
              <FontAwesomeIcon
                icon={faEllipsisV}
              />
            
          </Dropdown>
        );
      },
    },

菜单组件

const menu = (
    <Menu style={{ width: 100 }}>
      <Menu.Item key="0" style={{ padding: 0 }}>
        <span
          css={css`
            width: 100%;
            height: 100%;
            display: block;
            padding: 5px;
          `}
          onClick={(event) => showUpdateModal(event)}
        >
          Update
        </span>
      
      )}
    </Menu>
  );

function showUpdateModal(event: any) {
    event.stopPropagation();
    setUpdateModalVisibility(true);
  }

表组件

<Table
          className="your-table"
          size="small"
          scroll={{
            x: 1200,
          }}
          {...tableProps}
          onRow={(record, rowIndex) => {
            return {
              onClick: (event) => {
                var selection = window.getSelection();
                if (selection && selection.type != "Range") {
                  history.push(
                    `/buy/${record.vehicleYear}-${record.make
                      .split(" ")
                      .join("-")}-${record.model.split(" ").join("-")}/${
                      record.itemId
                    }/1`
                  );
                }
              }, // click row
            };
          }}
          rowClassName="table-row"
          dataSource={sellerActivityData}
          columns={columns}
          
          
        />

我尝试将焦点放在我的模态中的输入字段上，但它没有解决问题。

标签： javascriptreactjstypescriptantd

以下是您可以尝试的事情：

在您的列下拉渲染中，尝试放置e.stopPropagation()您的FontAwesomeIcon组件或对其进行测试，将其更改为<button>first。如果不放它可能会触发表格行点击事件。
```
 <FontAwesomeIcon
     icon={faEllipsisV}
     onClick={(e) => e.stopPropagation()}
 />
```

与其把onClick事件放在上面span，不如试着把它放在上面Menu

 <Menu
     style={{ width: 100 }}
     onClick={({ key, domEvent }) => showUpdateModal(domEvent)}
 >
     <Menu.Item key="0" style={{ padding: 0 }}>
         <span
             css={css`
             width: 100%;
             height: 100%;
             display: block;
             padding: 5px;
          `}
         >
            Update
        </span>
   </Menu.Item>
 </Menu>;

这是我在 javascript 和 antd v4.x 上制作的工作示例：

javascript - 手动关闭 AntD 菜单

问题描述

解决方案

推荐阅读