Javascript 手动关闭AntD菜单

我在antd中实现了一个表，每一行都有一个下拉菜单，单击菜单项时会出现一个模式。此外，我还使用了

onRow

单击表行。因此，为了防止在单击菜单项时触发onRow click，我在单击菜单项时使用了

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>
        );
      },
    },

{
标题：“，
键：“操作”，
修正：“对”，
宽度：40，
类名：“操作按钮”，
渲染：（值：任意，行：任意，索引：任意）=>{
返回(
);
},
},

菜单组件

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}
          
          
        />

const菜单=(
showUpdateModel（事件）}
>
更新
)}
);
函数showUpdateModel（事件：任意）{
event.stopPropagation（）；
setUpdateModalVisibility（真）；
}

表格组件

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}
          
          
        />

{
返回{
onClick：（事件）=>{
var selection=window.getSelection（）；
if（selection&&selection.type！=“范围”）{
历史推送(
`/购买/${record.vehicleYear}-${record.make
.拆分（“”）
.join（“”）}-${record.model.split（“”）.join（“”）}/${
record.itemId
}/1`
);
}
}，//单击行
};
}}
rowClassName=“表行”
数据源={sellerActivityData}
列={columns}
/>

---

我尝试在模态中对输入字段进行聚焦，但没有解决问题。

以下是您可以尝试的内容：

在列下拉列表渲染中，尝试将

e.stopPropagation（）

放在

fontaweomeicon

组件上，或者要测试它，请先将其更改为

。如果不放置，它可能会触发表行单击事件

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

下面是我在javascript和antd v4.x上制作的一个工作示例：

---

太好了！如果您有多个菜单项，并且需要检测单击的菜单项，您可以在回调函数上使用

键

或

项

，并将其传递给

showUpdateModeda

函数。查看更多