Event handlers for MDBSelect multiple


Topic: Event handlers for MDBSelect multiple

matthewericfisher asked 6 years ago

What is the proper event handler for changes in an MDBSelect multiple? I've tried onChange but it is never called. I tried getValue(). It is called but repeatedly with an empty array.

I want to get a notification when an option is selected/unselected. It seems that should be very simple. Is there some documentation that I missing?

 <MDBSelect multiple onChange={this.selectExchange} color="primary" selected="Exchange" options={[
                           {text:"Amex",value:"1"},
                           {text:"NASDAQ",value:"12"},
                           {text:"NYSE",value:"10"}
                   ]}/>enter code here

matthewericfisher commented 6 years ago

After looking at the source, getValue() is the proper handler.

The getValue() made an update to this.state. The update seems to confuse the MDBSelect component as render() is called again. Is there a better strategy to storing the options select other than using this.state e.g.

getValue(e) { this.setState({exchange:e});} // render() called again which results in getValue called again with empty array


matthewericfisher commented 6 years ago

There is a subtle issue with the options being defined inline. Each time render is called a new js object is created. The MDBSelect componentDidUpdate is called and compares the old object to the just created one which is not equal thus the object is reset. I added the options as this.exchangeOptions = [ ...] and the select widget seems to be working as expected.

It would be of great value to enhance the example to show event handling rather than just view layer setup


Jakub Mandra staff premium answered 6 years ago

Hi,

You can find information about usage, properties, and component's methods on the API section of the documentation.

Got to: https://mdbootstrap.com/docs/react/forms/multiselect/ and use the menu at the top of the page to switch between Overview and API.

Here is the snippet with proper use of the select component:

import React, { Component } from "react";
import { MDBSelect } from "mdbreact";

class SelectPage extends Component {
  state = {
    options: [
      {
        checked: false,
        value: "1",
        text: "Option 1"
      },
      {
        checked: false,
        value: "2",
        text: "Option 2"
      },
      {
        checked: false,
        value: "3",
        text: "Option 3"
      }
    ],

    selectValue: ''
  };

  changeSelectValue = (selectValue) => {
    console.log(selectValue)
    this.setState({ selectValue })
  };

  render() {
    return (
      <div>
        <MDBSelect
            multiple
            options={this.state.options}
            selected="Choose your option"
            getValue={this.changeSelectValue}
        />
        <label>Example label</label>
      </div>
    );
  }
}

export default SelectPage;

Also, there is a getTextContent function, which lets you get text value on select change.

Best,

Jakub


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.0
  • Device: desktop
  • Browser: Chrome
  • OS: OS x
  • Provided sample code: No
  • Provided link: No
Tags