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

我试图实现一个带有搜索功能的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"));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{菜单，下拉，输入}；
类OverlayVisible扩展React.Component{
状态={
可见：假
};
handleMenuClick=（e）=>{
如果（如键==“3”）{
this.setState（{visible:false}）；
}
};
HandleVibleChange=（标志）=>{
this.setState（{visible:flag}）；
};
render（）{
常量菜单=(
单击“我”不会关闭菜单。
);
返回(
{
this.setState（{visible:true}）；
}}
覆盖={menu}
onVisibleChange={this.handleVisibleChange}
可见={this.state.visible}
触发器={[“单击”]}
>
{
this.setState（{visible:true}）；
}}
>
{/*
我认为您可以通过更改输入搜索m来实现这一点

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

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

再添加一个用于存储输入值的状态

 state = {
    visible: false,
    value: ''
  };

现在设置用户在输入中键入值时的值状态

<Input.Search
   onInput={() => {
     this.setState({ visible: true });
   }}
   onChange={e => this.setState({value: e.target.value})}
   />

{
this.setState（{visible:true}）；
}}
onChange={e=>this.setState（{value:e.target.value}）}
/>

现在，通过值的长度控制下拉列表的可见性

  handleVisibleChange = (flag) => {
    if(this.state.value.length <= 0)
     this.setState({ visible: false });
    else
     this.setState({ visible: flag });
  };

handleVisibleChange=（标志）=>{
if（this.state.value.length{
如果（如键==“3”）{
this.setState（{visible:false}）；
}
};
HandleVibleChange=（标志）=>{
if（this.state.value.length
{
this.setState（{visible:true}）；
}}
onChange={e=>this.setState（{value:e.target.value}）}
>
{/*e.preventDefault（）}>
盘旋我
*/}
);
}
}
render（，document.getElementById（“容器”）；
您可以使用
Select
antd组件进行此操作。在
Select
antd组件中有一个
notFoundContent
API，用于指定未找到搜索时显示的内容。您可以为此API指定null，如果未找到数据，则不会显示下拉列表。是的，这似乎是此场景中的唯一选项如果你喜欢我的评论或回答，请接受我的回答。如果我连续单击搜索框，它会切换下拉菜单的打开和关闭。这是我想要避免的情况
  handleVisibleChange = (flag) => {
    if(this.state.value.length <= 0)
     this.setState({ visible: false });
    else
     this.setState({ visible: flag });
  };

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,
    value: ''
  };

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

  handleVisibleChange = (flag) => {
    if(this.state.value.length<=0)
    this.setState({ visible: false });
    else
    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 });
          }}
          onChange={e => this.setState({value: e.target.value})}
        ></Input.Search>
        {/* <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          Hover me <Icon type="down" />
        </a> */}
      </Dropdown>
    );
  }
}

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