Event handlers for MDBSelect multiple

Topic: Event handlers for MDBSelect multiple

matthewericfisher free asked 5 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 free commented 5 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 free commented 5 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

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Hi,

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

Got to: <a href="https://mdbootstrap.com/docs/react/forms/multiselect/" target="_blank">https://mdbootstrap.com/docs/react/forms/multiselect/</a> and use the menu at the top of the page to switch between <code>Overview</code> and <code>API</code>.

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

<pre class="prettyprint"><code>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;
</code></pre>

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

Best,

Jakub

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

matthewericfisher

30Support score
4Questions 1Answers 0Snippets