有没有办法不通过点击来关闭antd下拉菜单？

Question

我正在尝试实现具有搜索功能的 Antd 下拉菜单，并希望在单击外部时关闭下拉菜单。但在我的代码中，即使我单击搜索框，也会在单击外部时切换下拉列表的打开和关闭（不需要）。我希望只有在搜索框中输入了一些字符时才打开下拉菜单，如果搜索框中没有字符或在外部单击则关闭下拉菜单，并且如果我继续单击搜索框本身。我错过了什么道具吗？这是示例代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Dropdown, Input } from "antd";

class OverlayVisible extends React.Component {
  state = {
    visible: false
  };

  handleMenuClick = (e) => {
    if (e.key === "3") {
      this.setState({ visible: false });
    }
  };

  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  };

  render() {
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
      </Menu>
    );
    return (
      <Dropdown
        onClick={() => {
          this.setState({ visible: true });
        }}
        overlay={menu}
        onVisibleChange={this.handleVisibleChange}
        visible={this.state.visible}
        trigger={["click"]}
      >
        <Input.Search
          onInput={() => {
            this.setState({ visible: true });
          }}
        ></Input.Search>
        {/* <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          Hover me <Icon type="down" />
        </a> */}
      </Dropdown>
    );
  }
}

ReactDOM.render(<OverlayVisible />, document.getElementById("container"));

CodeSandbox链接：https://codesandbox.io/s/aman-521r2? file=/index.js:0-1236

Answer 1

遇到了同样的问题，并通过添加onClick={(e) => e?.stopPropagation()}到单击不应关闭叠加层的容器来解决

Answer 2

我认为你可以通过更改输入搜索 m 来做到这一点

<Input.Search
          onChange={(e) => {
         
            if (e.target.value.length) {

              this.setState({ visible: true });
              return false;
            }
            this.setState({ visible: false });
          }}
        ></Input.Search>

并setstate从中删除handleVisibleChange

  handleVisibleChange = (flag) => {
 
  };