Проблема, позволяющая снять флажок после применения функции проверки React js
У меня есть функция ограничения выбора, которая гарантирует, что общий отмеченный флажок выше минимального значения и ниже максимального значения, эти значения были взяты из JSON, из которого отображаются флажки, но моя проблема возникает, если минимум выше 1, как это делает функция -1, поэтому, если минимум был 2, остается 1 флажок. Вы можете увидеть на демо разницу между ордерами 1 и ордерами 2.
Полный код: https://codesandbox.io/embed/zo27pvx8l?fontsize=14
Примечание: Я намеренно разрешаю отменить выбор, чтобы позже добавить предупреждающие знаки и дать возможность переключаться между выбранными вариантами, я пытаюсь найти логический подход, при котором все можно отменить независимо от минимума.
Функция
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.props.max) {
this.setState({ currentData: this.state.currentData + 1 });
} else {
event.preventDefault();
event.currentTarget.checked = false;
}
} else {
if (this.state.currentData >= this.props.min) {
this.setState({ currentData: this.state.currentData - 1 });
} else {
event.preventDefault();
event.currentTarget.checked = true;
}
}
}
@EduardoJunior Заказы 1 и Заказы 4 работают нормально, потому что минимум равен 1, но Заказы 2 и Заказы 3, где минимум выше 1, если вы выберете более одного варианта и попытаетесь отменить их выбор, вы получите варианты, которые вы не могу снять выделение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Так что, вообще говоря, получение состояния из элементов dom доставит вам головную боль. Просто следите за тем, что было и не было нажато в массиве, и устанавливайте реквизит checked в зависимости от того, находится он в массиве или нет.
Тогда вам не нужно ничего увеличивать или уменьшать, просто проверьте длину массива, чтобы узнать, находится ли она выше или ниже реквизитов min/max.
шаг 1: добавьте массив для отслеживания проверенных вещей
this.state = {
.. other stuff ..
checkedList: []
};
шаг 2: установите проверенное значение на основе того, находится ли оно в массиве
<input
...
checked = {this.state.checkedList.includes(
this.props.childk + (item.name || item.description)
)}
...
/>
шаг 3: упростите обработчик onChange:
selectData(id) {
if (
!this.state.checkedList.includes(id) &&
this.state.checkedList.length < this.props.max
) {
this.setState({ checkedList: [...this.state.checkedList, id] });
} else if (this.state.checkedList.includes(id)) {
this.setState({
checkedList: this.state.checkedList.filter(x => x !== id)
});
}
}
шаг 4: сделайте так, чтобы ваш обработчик onChange соответствовал
<input
...
onChange = {() =>
this.selectData(
this.props.childk + (item.name || item.description)
)
}
...
/>
спасибо за ваш ответ, Что касается вашей функции selectdata, я не заметил никакого использования this.props.min, что смутило мое понимание того, что именно происходит в функции. Это работает, но я этого не понимаю. Вы можете это объяснить?
вам не нужно обрабатывать какую-либо логику min, пока пользователь выбирает элементы. вы можете выбрать 0 или max, но не более max. в конечном итоге вы отправите форму, а затем сможете предупредить пользователя, если он не выбрал хотя бы мин. элементов.
Я не смог найти ошибку. Можете пошагово написать как воспроизвести?