Topic: onSelect event for react dropdown component
Dropdown component does not emit any event. For "customizability"'s sake the DropdownItem take in an onClick function prop to have the users design the kind of output they want from clicking it. We also understand that a slightly more holistic approach might be needed for some cases, so we are totally open for feedback. Please @everyone let me know what do you think would be best kind of clicking event handling for the component and we will try to implement it!
With Best Regards,
Kuba fola commented 6 years ago
Interesting. Has there been any movement on this. I'd love to see a couple examples with the onclick function prop utilized.
Hi fola,
you can attach a regular onClick event listener to the MDBDropdownItem
import React, { Component } from "react";
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";
class DropdownPage extends Component {
state = {
value: ""
}
onClickHandler = event => {
const value = event.target.innerHTML;
this.setState({ value })
}
render() {
return (
<>
<p>Value: {this.state.value}</p>
<MDBDropdown>
<MDBDropdownToggle caret color="primary">
MDBDropdown
</MDBDropdownToggle>
<MDBDropdownMenu basic>
<MDBDropdownItem onClick={this.onClickHandler}>Action</MDBDropdownItem>
<MDBDropdownItem onClick={this.onClickHandler}>Another Action</MDBDropdownItem>
<MDBDropdownItem onClick={this.onClickHandler}>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem onClick={this.onClickHandler}>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
}
export default DropdownPage;
fola commented 6 years ago
Thank you Anna,
But this does not change the MDBDropdownItem to the active class when clicked.
Hi there,
you can connect the active prop with the state, for example like this:
import React, { Component } from "react";
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";
class DropdownPage extends Component {
state = {
value: ""
}
onClickHandler = event => {
const value = event.target.innerHTML;
this.setState({ value })
}
render() {
return (
<>
<p>Value: {this.state.value}</p>
<MDBDropdown>
<MDBDropdownToggle caret color="primary">
MDBDropdown
</MDBDropdownToggle>
<MDBDropdownMenu basic>
<MDBDropdownItem active={this.state.value === "Action"} onClick={this.onClickHandler}>Action</MDBDropdownItem>
<MDBDropdownItem active={this.state.value === "Another Action"} onClick={this.onClickHandler}>Another Action</MDBDropdownItem>
<MDBDropdownItem active={this.state.value === "Something else here"} onClick={this.onClickHandler}>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem active={this.state.value === "Separated link"} onClick={this.onClickHandler}>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</>
);
}
}
export default DropdownPage;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No