Как увидеть значения в Semantic-UI-React с несколькими атрибутами?

Question

Это действительно прямой вопрос.Обратите внимание, у меня есть атрибут множественного числа.Когда я выбираю значение, оно просто помещает значение в массив.Следовательно, если у меня есть несколько значений, это даст мне массив с несколькими значениями, но не конкретную опцию, которую я выберу.

Теперь мой вопрос: как мне получить это конкретное значение, когда я удаляю из выпадающего списка?Я искал в Google в течение часа и не нашел ответа.

<Dropdown 
    options={options} 
    onChange={this.onChange.bind(this)}
    search fluid multiple selection/>

onChange(e,  { value } ) {
        e.preventDefault();     
       // e.target.value DOESN'T WORK???!!!

    }

Answer 1

Таким образом, Dropdown from Semantic UI, кажется, не предоставляет эту функциональность "из коробки".Тем не менее, есть достойный способ достижения этого.Сначала создайте состояние, например:

this.state = {
  selected: [],
}

Затем привяжите функцию к компоненту Dropdown следующим образом:

<Dropdown
  placeholder="Skills"
  fluid
  multiple
  selection
  options={options}
  onChange={this.handleChange}/>

После этого напишите функцию handleChange для сравнения массива.длины на каждое изменение.Если массив состояний длиннее любого массива, который вы получаете из выпадающего списка, элемент был удален, и вы можете проверить, какой из них.В противном случае выведите массив в состояние.

handleChange = (e, { value }) => {
    if (this.state.selected.length > value.length) { // an item has been removed
        const difference = this.state.selected.filter(
            x => !value.includes(x),
        );
        console.log(difference); // this is the item
        return false;
    }
    return this.setState({ selected: value });
};

Для работы с IE8 и ниже вам понадобится полифилл.