Reputation: 2394
I am using DropdownButton
from react-bootstrap to create a dropdown with custom content. In the content the user can select various options and the click a button inside the dropdown to submit the selected options.
The problem I am facing is that I am unable to close the dropdown when the user clicks the submit button.
This is my code:
<DropdownButton
title={ name }
variant="outline-secondary"
onToggle={ this.handleDropdownToggle }
>
<div className="body">
{ this.renderOptions(options) }
</div>
<div className="filter-submit">
<Button variant="primary" onClick={ this.onSubmit }>
Accept
</Button>
</div>
</DropdownButton>
If I use the Dropdown
element with Dropdown.Toggle
Dropdown.menu
and the show
property, I can control the visibility, but it disables the ability to close the dropdown when clicking outside it.
Upvotes: 3
Views: 11245
Reputation: 161
I have implemented react bootstrap in functional component as below, it creates a dropdown with list items and ellipses to toggle it on/off:
import React, { useRef, useState } from 'react';
import { Dropdown } from 'react-bootstrap';
const yourfunctionalcomp = (props) => {
const [showDropdown, setShowDropdown] = useState(false);
const setDropdown = () => {
setShowDropdown(!showDropdown)
}
return (
.....
<Dropdown show={showDropdown} onToggle={setDropdown}>
<Dropdown.Toggle onClick={setDropdown}>
<i className="fa fa-ellipsis-v"/>
</Dropdown.Toggle>
<Dropdown.Menu>
<li key={"firstkey"}>first menu</li>
<li key={"secondkey"}>second menu</li>
</Dropdown.Menu>
</Dropdown>
.....
)
}
Upvotes: 0
Reputation: 519
This code works well,
class DropdownFixed extends Component {
state = { dropdownIsOpen: false }
toggleDropdown = () => this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen })
render {
return (
<DropdownButton
onToggle={toggleDropdown}
open={dropdownIsOpen}
>
<MenuItem onClick={toggleDropdown}>Click me!</MenuItem>
</DropdownButton>
)
}
}
Upvotes: 0
Reputation: 76
You can accomplish this with a simple state change triggered by an onClick event.
Within your react component do something like this:
state = {
showDropdown: false
}
toggleDropdown = () => {
if (this.state.showDropdown) {
this.setState({ showDropdown: false });
} else {
this.setState({ showDropdown: true });
}
}
On your dropdown component add an onClick to trigger this state change on any item you want to have open or close the dropdown menu. Make your life easy with the onBlur trigger to trigger close if you click anywhere outside the opened dropdown:
<DropdownButton
title={ name }
variant="outline-secondary"
onClick={() => this.toggleDropdown()}
onBlur={() => this.toggleDropdown()}
>
<Dropdown.Item href="#/action-1" onClick={() => this.toggleDropdown()}>Action</Dropdown.Item>
<Dropdown.Item href="#/action-2" onClick={() => this.toggleDropdown()}>Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3" onClick={() => this.toggleDropdown()}>Something else</Dropdown.Item>
</DropdownButton>
Upvotes: 3