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

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 2

Я вижу много проблем с вашим кодом, для начала вы неправильно установили свое состояние.Попробуйте что-то вроде ниже.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>
    )

  }

}

Примечание. Я не проверял вышеуказанный код.Но независимо от того, что вы не можете установить настройку так, как делаете, состояния реакции неизменны.Вместо этого используйте setState.

Answer 3

Вы не можете просто явно установить состояние (ожидайте в конструкторе).В обработчике событий (при изменении) вы должны использовать 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' в функции).

Вот это работает на JS Fiddle https://jsfiddle.net/69z2wepo/184044/

Answer 4

В этом ответе используется vanilla-js (без Bootstrap-multiselect), но он должен работать одинаково.

Не следует устанавливать состояние реакции напрямую, состояние реакции является неизменным.Вы всегда должны использовать setState, поэтому this.state.searchForm.status = event.target.value должно было быть this.setState({searchForm: {status: event.target.value, otherprops:"blah"}}).Вы можете прочитать о setState из React Docs

event.target.value не дает вам все выбранные значения.Если вы console.log event.target, вы можете увидеть все значения, если вы проверите для event.target[0].selected, вы увидите, был ли выбран ваш первый элемент или нет.Точно так же вы должны пройти через все и посмотреть, какие все были выбраны.

Answer 5

В реакции вы не можете изменить состояние напрямую, вам придется использовать this.setState, который вернет новое состояние вашему компоненту, и реакция будет перерисована при необходимости.

Для выбранной вами проблемывам нужно будет отобразить каждый параметр с атрибутом «selected», чтобы он был выбран.