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

Question

我已經進行了大量搜索，但無法使其正常工作。 看起來很簡單。 順便說一下，我正在使用 Bootstrap-multiselect。

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>
)
}}

問題

1. 未選擇默認值（VALUE2 和 VALUE4）；

2. 當我更改所選選項時似乎沒有任何反應

編輯

似乎每個人都在談論我沒有正確設置狀態的事實，我完全同意。 這是我犯的一個愚蠢的錯誤。 但是，我面臨的根本問題仍然存在：

1. 正如我所提到的，默認值沒有被填充；

2. onStatusChanged 函數根本不會被觸發。 我將調試點放在此函數中，但是當我更改所選選項時根本沒有達到調試點。

   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}>

編輯 2

最新代碼：

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>
    )
}}

重申我面臨的問題：

1. 正如我所提到的，默認值沒有被填充；

2. onStatusChanged 函數根本不會被觸發。 我在這個函數中放置了調試點，但是當我更改所選選項時根本沒有達到調試點。 似乎未檢測到 onChange。

順便說一句，如果有幫助，我正在使用Bootstrap-multiselect插件。

Answer 1

在 React 中，您不能直接修改狀態，您必須使用 this.setState 這將向您的組件返回一個新狀態，並且如果需要，React 將重新渲染。

對於您選擇的問題，您必須使用“selected”屬性呈現每個選項才能被選中。

Answer 2

您不能只顯式設置狀態（期望在構造函數中）。 在事件處理程序中（更改時），您必須使用 this.setState(...)。 此外，您應該使用 'selectedOptions' 屬性。

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)}>

如果你要傳入一個函數，那么你需要綁定“this”以便它可以設置狀態（如果你需要訪問函數中的“this”，你只需要執行 bind(this) ）。

這是它在 JS Fiddle https://jsfiddle.net/69z2wepo/184044/上的工作

Answer 3

這個答案使用的是 vanilla-js（沒有 Bootstrap-multiselect），但應該都一樣。

你不應該直接設置反應狀態，反應狀態是不可變的。 你應該總是使用setState所以this.state.searchForm.status = event.target.value應該是this.setState({searchForm: {status: event.target.value, otherprops:"blah"}}) 。 你可以從React Docs 中了解setState

event.target.value不會為您提供所有選定的值。 如果你console.log event.target你可以看到所有的值，如果你檢查event.target[0].selected你可以看到你的第一個元素是否被選中。 同樣，您必須遍歷所有內容並查看已選擇的所有內容。

Answer 4

我可以看到您的代碼有很多問題，首先，您設置的狀態錯誤。 嘗試類似下面的內容。 是

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>
    )

  }

}

注意：我還沒有測試過上面的代碼。 但是不管你不能按照你的方式設置集合，反應狀態是不可變的。 改用setState 。

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

使用 Lodash 的最簡單方法是：

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;