gpt4 book ai didi

reactjs - Reactstrap:防止在选择项目时关闭下拉菜单

转载 作者:行者123 更新时间:2023-12-05 05:30:59 24 4
gpt4 key购买 nike

一个 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 上的类似问题中提到的其他东西,但没有任何效果。

最佳答案

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

关于reactjs - Reactstrap:防止在选择项目时关闭下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74485968/

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