reactjs - 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 中看到的那样，以及在 SO 上的类似问题中提到的其他东西，但没有任何效果。

Answer 1

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