javascript - 手动关闭 AntD 菜单

Question

我在 antd 中实现了一个表格，每一行都有一个下拉菜单，当单击菜单项时，会出现一个模式。此外，我还使用了 onRow 点击表格行。因此，为了防止在单击菜单项时触发 onRow 单击，我在菜单项单击时使用了 stopPropagation。一切正常，但问题是因为我在菜单项点击时使用了 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}
          
          
        />

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

Answer 1

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

1. 在您的列下拉渲染中，尝试放置 e.stopPropagation()在你的 FontAwesomeIcon组件或对其进行测试，将其更改为 <button>第一的。如果不放置，可能会触发表格行的点击事件。

    <FontAwesomeIcon
        icon={faEllipsisV}
        onClick={(e) => e.stopPropagation()}
    />
   

2. 而不是输入 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 上制作的工作示例: