gpt4 book ai didi

javascript - 有没有办法不通过点击关闭antd下拉菜单?

转载 作者:行者123 更新时间:2023-12-04 07:33:29 54 4
gpt4 key购买 nike

我试图实现一个具有搜索功能的 Antd 下拉菜单,并希望在单击外部时关闭下拉菜单。但是在我的代码中,即使我单击搜索框,也会在外部单击,它会切换下拉菜单的打开和关闭(不需要)。我希望我的下拉菜单仅在搜索框中输入一些字符时打开,如果搜索框中没有字符或在外部单击则关闭,如果我继续单击它不应该打开和关闭搜索框本身。有什么 Prop 我错过了吗?
这是示例代码:

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

最佳答案

我认为您可以通过更改 Input Search 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) => {

};

关于javascript - 有没有办法不通过点击关闭antd下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67847206/

54 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com