onSelect event for react dropdown component


Topic: onSelect event for react dropdown component

rmedrano23 pro asked 6 years ago

Hi. Perhaps this is a basic question but I haven't been able to find the right event. I am using the dropdown (button) component in a react app. What event should I use to find out the selected option? Thanks in advance.

Jakub Strebeyko staff answered 6 years ago

Hi there, As of now, the 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.


Anna Morawska staff answered 6 years ago

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.


Anna Morawska staff answered 6 years ago

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;

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No