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

【问题标题】：Is there a way not to close the antd dropdown menu by clicking on it?有没有办法不通过点击关闭antd下拉菜单？
【发布时间】：2021-08-23 02:19:18
【问题描述】：

我正在尝试实现具有搜索功能的 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"));

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

【问题讨论】：

您可以为此使用Select antd 组件。
在Select antd 组件中有一个notFoundContent API 用于指定在没有找到搜索时显示的内容。您可以将此 API 指定为 null，如果未找到数据，则不会显示下拉列表。
是的，这似乎是这种情况下的唯一选择
如果您喜欢我的评论或回答，请接受我的回答。

标签： javascript html jquery css reactjs

【解决方案1】：

再添加一个状态来存储输入值。

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

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

<Input.Search
   onInput={() => {
     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 });
  };

完整代码：

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"));

【讨论】：

如果我连续单击搜索框，它会切换下拉菜单的打开和关闭，这将不起作用。这是我想避免的事情

【解决方案2】：

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

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

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

并从handleVisibleChange 中删除setstate

  handleVisibleChange = (flag) => {
 
  };

【讨论】：