Bootstrap-multiselect：默认值和 onChange 不起作用

Question

I've done plenty of searches but couldn't get this to work. Seems quite straightforward. I am using Bootstrap-multiselect by the way.

class MyProject extends React.Component {
constructor(props) {
    super(props);
    this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
    }

//blah blah
render() {
return (
<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={(event) => this.state.searchForm.status = event.target.value}>
    <option value="VALUE1">VALUE1</option>
    <option value="VALUE2">VALUE2</option>
    <option value="VALUE3">VALUE3</option>
    <option value="VALUE4">VALUE4</option>
    <option value="VALUE5">VALUE5</option>
    <option value="VALUE6">VALUE6</option>
    <option value="VALUE7">VALUE7</option>
    <option value="VALUE8">VALUE8</option>
</select>
)
}}

PROBLEM

1. Default values (VALUE2 and VALUE4) are not getting selected;

2. Nothing seems happening when I change selected options

EDIT

Seems everyone is talking about the fact that I am not setting state correctly, which I absolutely agree. It was a silly mistake I made. However, the fundamental problem I am facing still remains:

1. as I mentioned, default values are not getting populated;

2. onStatusChanged function is not triggered at all. I put debug point in this function but the debug point was not reached at all when I changed selected options.

   onStatusChanged = (e) => { let search = this.state.searchForm; search.status = e.target.selectedOptions; this.setState({ searchForm: search }) }

<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={this.onStatusChanged}>

EDIT 2

Latest code:

class MyProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
        this.onStatusChanged = this.onStatusChanged.bind(this);
        }

    //blah blah
    onStatusChanged = (e) => {
        let search = this.state.searchForm;
        search.status = e.target.selectedOptions;
        this.setState({
            searchForm: search
        })
    }

    render() {
    return (
    <select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.onStatusChanged}>
        <option value="VALUE1">VALUE1</option>
        <option value="VALUE2">VALUE2</option>
        <option value="VALUE3">VALUE3</option>
        <option value="VALUE4">VALUE4</option>
        <option value="VALUE5">VALUE5</option>
        <option value="VALUE6">VALUE6</option>
        <option value="VALUE7">VALUE7</option>
        <option value="VALUE8">VALUE8</option>
    </select>
    )
}}

To re-iterate problems I am facing:

1. as I mentioned, default values are not getting populated;

2. onStatusChanged function is not triggered at all. I put debug point in this function but the debug point was not reached at all when I changed selected options. Seems like onChange was not detected.

By the way, in case it helps, I am using Bootstrap-multiselect plugin.

Answer 1

In react you can't modify the state directly, You will have to use this.setState That will return a new state to your component and react will re-render if needed.

For your selected issue, you will have to render each option with the “selected” attribute for it to be selected.

Answer 2

You can't just explicitly set the state (expect in the constructor). In the event handler (on change), you have to use this.setState(...). Also you should be using the 'selectedOptions' property.

onStatusChanged(event) {
  let searchForm = this.state.searchForm;
  searchForm.status = event.target.selectedOptions;
  this.setState({
    searchForm:searchForm
  });
}

....

<select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.onStatusChanged.bind(this)}>

If you are going to pass in a function, then you need to bind "this" so that it can set the state (you only need to do bind(this) if you need access to 'this' in the function).

Here's it working on JS Fiddle https://jsfiddle.net/69z2wepo/184044/

Answer 3

This answer is using vanilla-js(without Bootstrap-multiselect) but should work all the same.

You should not set react state directly, react state is immutable. You should always use setState so this.state.searchForm.status = event.target.value should have had been this.setState({searchForm: {status: event.target.value, otherprops:"blah"}}) . You can read about setState from React Docs

event.target.value does not give you all the selected values. If you console.log event.target you can see all the values, if you check for event.target[0].selected you can see if your first element has been selected or not. Likewise, you have to iterate through all and see which all has been selected.

Answer 4

I can see a lot of problems with your code, for a start, you are setting your state wrong. Try something like below. Y

class MyProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};

            this.handlesChange = this.handlesChange.bind(this);
        }

        handlesChange(e){
            let statuses  = this.state.searchForm.status;
            let index = statuses.indexOf(e.target.value);

            if(index > 0) {
                this.setState({searchForm: statuses.splice(index, 1) })
            } else {
                statuses.push(e.target.value);
                this.setState({ searchForm: statuses});
            }
        }

    //blah blah
    render() {
        return (
            <select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.handlesChange}>
                <option value="VALUE1">VALUE1</option>
                <option value="VALUE2">VALUE2</option>
                <option value="VALUE3">VALUE3</option>
                <option value="VALUE4">VALUE4</option>
                <option value="VALUE5">VALUE5</option>
                <option value="VALUE6">VALUE6</option>
                <option value="VALUE7">VALUE7</option>
                <option value="VALUE8">VALUE8</option>
            </select>
    )

  }

}

Note: I haven't tested the above code. But regardless you can't set the set the way you are doing, react states are immutable. Use setState instead .

Answer 5

I have modified your code to have multi select option. 

#1 - I have added default selected values.
#2 - handleMultiSelect method will loop through the items selected and we set it to state.
#3 html content with values being printed based on our selected. 

 this.state = {
                value: ["VALUE2", "VALUE3", "VALUE4"]
            }


        handleMultiSelect = (e) =>{
            const options = e.target.options;
            var value = [];
            for (var i = 0, l = options.length; i < l; i++) {
              if (options[i].selected) {
                value.push(options[i].value);
              }
            }

            this.setState({
                value: value
            })

        }


   ########################HTML CODE ######################
    Selected Options {this.state.value} <br />
                    <select id="example-multiple-selected" 
                            multiple 
                            onChange={this.handleMultiSelect}
                            value={this.state.value}>
                        <option value="VALUE1">VALUE1</option>
                        <option value="VALUE2">VALUE2</option>
                        <option value="VALUE3">VALUE3</option>
                        <option value="VALUE4">VALUE4</option>
                        <option value="VALUE5">VALUE5</option>
                        <option value="VALUE6">VALUE6</option>
                        <option value="VALUE7">VALUE7</option>
                        <option value="VALUE8">VALUE8</option>
                    </select>

Hope this helps for you :)

Answer 6

The easiest way with Lodash is:

import React, { useState } from 'react';
import map from 'lodash/map';

const MultipleSelect = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  const onMultipleSelectChange = event => {
    setSelectedValues(map(event.target.selectedOptions, option => option.value));
  };

  return (
    <select multiple value={selectedValues} onChange={onMultipleSelectChange}>
      <option value="value-1">value 1</option>
      <option value="value-2">value 2</option>
      <option value="value-3">value 3</option>
    </select>
  );
};

export default MultipleSelect;