Удаление параметров из выбора при выборе
Попытка сделать что-то в реакции, где у меня есть дни недели с опциями выбора.
Когда вариант выбран в понедельник (например), я хочу, чтобы он не был включен в список для вторника и среды.
Быстрый визуальный макет, чтобы помочь визуализировать. https://i.imgur.com/3KhHAyn.png
Мысли до сих пор заключались в том, чтобы создать новый массив состояний под названием «доступный», затем выполнить функцию при изменении выбора, чтобы удалить его из массива и обновить состояние до этого.
Хотя это работает, оно также удаляет его из выбранного…
// function to remove from the list and update state
removeFromList = event => {
let updatedList = this.state.availableMeals;
console.info(event.target.value);
updatedList = updatedList.filter(function(item) {
return (
item.fields.Name.toLowerCase().search(
event.target.value.toLowerCase()
) === -1
);
});
this.setState({ availableMeals: updatedList });
// from inside the component
<select onChange = {this.props.removeFromList}>
<option>select an option…</option>
{this.props.meals.map(meal => (
<option key = {meal.id}>{meal.fields.Name}</option>
))}
</select>
Любые идеи о том, как подойти к чему-то подобному?
Мысли, которые у меня были, были о том, чтобы сохранять каждый день и выбранный вариант для указания, а затем ссылаться на это после того, как выбор был сделан?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Будет лучше не удалять опцию из списка в состоянии, а фильтровать ваши опции, когда вы их рендерите:
- Дочерний компонент с раскрывающимся списком:
class DropDown extends React.Component {
onSelect = event => {
this.props.selectItem(this.props.name, event.target.value);
};
render() {
return (
<select onChange = {this.onSelect}>
<option>select an option…</option>
{this.props.meals.map(meal => (
<option key = {meal.id} value = {meal.id}>{meal.value}</option>
))}
</select>
);
}
}
- Родительский компонент:
class ParentComponent extends React.Component {
constructor() {
super();
this.state = {
selectedItems: {}
};
}
getFilteredMeals(name) {
const removedItems = { ...this.state.selectedItems };
delete removedItems[name];
const removedItemsList = Object.values(removedItems);
return this.props.meals.filter(item => {
return !removedItemsList.includes(item.id);
});
}
getValue(name) {
return this.state.selectedItems[name];
}
selectItem = (name, value) => {
this.setState({
selectedItems: {
...this.state.selectedItems,
[name]: value
}
});
};
render() {
return (
<div>
<DropDown
name = "monday"
selectItem = {this.selectItem}
meals = {this.getFilteredMeals("monday")}
value = {this.getValue("monday")}
/>
<DropDown
name = "tuesday"
selectItem = {this.selectItem}
meals = {this.getFilteredMeals("tuesday")}
value = {this.getValue("tuesday")}
/>
<DropDown
name = "wednesday"
selectItem = {this.selectItem}
meals = {this.getFilteredMeals("wednesday")}
value = {this.getValue("wednesday")}
/>
</div>
);
}
}
Я создал для вас рабочий пример: https://codesandbox.io/embed/галантный-мурдок-vsibi
@xadm Я обновил свой ответ примером для многих элементов.
@AndriiGolubenko спасибо за это! Все еще довольно новичок в реагировании, поэтому интересно узнать рекомендуемые шаблоны для таких вещей.
Это может быть немного удивительно... и смешно
У вас есть отфильтрованный список this.state.availableMeals - вероятно, инициализирован из this.props.meals...
тогда почему бы не использовать это для рендера?
{this.state.availableMeals.map(meal => (
<option key = {meal.id}>{meal.fields.Name}</option>
))}
Хранение отфильтрованного списка может быть более эффективным - не нужно пересчитывать во время render.
Если вы отфильтруете параметры для всех раскрывающихся списков, выбранный вами вариант исчезнет в раскрывающемся списке, где вы выбрали этот параметр.
Вы правы... но не всегда нужно, т.е. визуализировать <Chip/> (или что-то еще, одно или несколько) перед <Select/> - таким образом мы выбираем набор опций, доступных для добавления (добавления) или замены выбранных в данный момент опций.
простая тройка на карте
return availablesIncludesOption() ? <option /> : null