Reactstrap:当一个项目被选中时，防止关闭下拉菜单

Question

一个DropdownItem包含一个搜索Input，所以当用户点击它时，我需要下拉菜单保持打开状态，以便他输入他需要搜索的内容:

import React, { Component } from "react";
import { connect } from "react-redux";
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
import SearchBar from "./SearchBar";
export class AddToCollectionButton extends Component {
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
render() {
return (
<Dropdown
isOpen={this.state.dropdownOpen}
toggle={this.toggle}
// color="default"
className="div-inline float-right ml-1"
direction="left"
>
<DropdownToggle
tag="span"
onClick={this.toggle}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
color="danger"
>
<span className="badge badge-danger cursor-pointer-no-color">
<i class="fa fa-plus" aria-hidden="true" />{" "}
</span>
</DropdownToggle>
<DropdownMenu className="dropdown-danger scrollable-drop-down-menu">
<DropdownItem

onClick={(e) => {
// e.preventDefault();
// e.stopPropagation();
// this.setState({
//   dropdownOpen: true,
// });
}}
>
<SearchBar />
</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(AddToCollectionButton);

我尝试了不同的东西，你可以看到里面的onClick和其他类似的问题上提到的东西，但没有工作。

Answer 1

不确定reactstrap中是否有这个选项，或者你是否可以使用React Bootstrap。
你可以在你的下拉菜单中添加autoClose={false}，它只会在再次点击下拉菜单图标时被关闭。

Answer 2

DropdownItem有一个布尔属性"toggle"默认为true。如果设置为false，则菜单在选择元素后保持打开状态。

<DropdownItem toggle={false} >
<SearchBar />
</DropdownItem>

文档:https://6-4-0--reactstrap.netlify.app/components/dropdowns/

Answer 3

您可以尝试在点击<SearchBar />元素input or div后添加stopPropagation。这将防止在<SearchBar />元素的单击时在父元素上触发click事件。