Как увидеть значения в Semantic-UI-React с несколькими атрибутами?
Это действительно прямой вопрос. Обратите внимание, что у меня есть множественный атрибут. Когда я выбираю значение, оно просто помещает значение в массив. Следовательно, если у меня есть несколько значений, он даст мне массив с несколькими значениями, но не конкретный вариант, который я выбираю.
Теперь мой вопрос: как мне получить это конкретное значение, когда я Удалить его из раскрывающегося списка? Я искал в Google час и не нашел ответа.
<Dropdown
options = {options}
onChange = {this.onChange.bind(this)}
search fluid multiple selection/>
onChange(e, { value } ) {
e.preventDefault();
// e.target.value DOESN'T WORK???!!!
}
Пробовал, что не работает ... Чтобы уточнить, вы можете получить то, что добавляется, но когда вы удаляете параметр, он не предоставляет никакой информации.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Таким образом, раскрывающийся список из семантического пользовательского интерфейса, похоже, не предоставляет эту функциональность из коробки. Однако есть достойный способ добиться этого. Сначала создайте состояние вроде:
this.state = {
selected: [],
}
Затем привяжите функцию к компоненту Dropdown следующим образом:
<Dropdown
placeholder = "Skills"
fluid
multiple
selection
options = {options}
onChange = {this.handleChangeEvent}/>
Как только это будет сделано, напишите функцию handleChangeEvent для сравнения длин массивов при каждом изменении. Если массив состояний длиннее любого массива, который вы получаете из раскрывающегося списка, элемент был удален, и вы можете проверить, какой из них. В противном случае сбросить массив в состояние.
handleChangeEvent = (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.info(difference); // this is the item
return false;
}
return this.setState({ selected: value });
};
Однако вам понадобится полифилл для работы в IE8 и ниже.
Это не возвращает конкретное значение того, что удаляется в массиве значений.
Но решать только вам. Если вы сохраните значение в состоянии и при каждом изменении сравниваете два, вы можете узнать, было ли что-то удалено. Позвольте мне изменить свой ответ
Однако я знаю, что в основном это говорит о том, что вы сравниваете два массива, что не может считаться хорошим решением.
Я предлагаю вам сделать управляемый компонент. Выпадающий список будет кормить вас массивами, а не изменениями в них, поэтому здесь вы мало что можете сделать. Имхо, наименее вредное решение - сначала проверить длину, а затем погрузиться в поиск разницы.
Большое спасибо. Это работает. Не могли бы вы подробнее рассказать о полифилле? Мне нужно будет установить пакет npm для этого полифилла?
В любое время, о да, если вы хотите поддерживать IE8 и ниже, вам нужно сначала проверить браузер, и если вы его обнаружите, у MDN есть хороший код полифилла для фильтра! developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Есть еще одна вещь, которая теоретически может работать и устранять необходимость в фильтрации массива. В раскрывающемся списке отображается событие onLabelClick, которое срабатывает всякий раз, когда пользователь щелкает ярлык, но НЕ X, который был нажат, когда вы что-то удаляете. Если вы хотите, вы можете скрыть X, прослушивать щелчки по ярлыкам, а затем 'onLabelClick = {e => handleChangeEvent (e.currentTarget.innerHTML)} `предоставит вам значение щелчка, которое вы удаляете из состояния, и подайте это состояние обратно в раскрывающийся список как value. Я посмотрю, есть ли для этого хорошее решение, которое позволит вам также оставить X.
Попробуйте простой подход? что-то вроде
onChange = {e => console.info(e)}даст вам полный объект события