Topic: Event handlers for MDBSelect multiple
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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