I have a selection limit function which ensures that total checked checkbox is above min value and under max value, these values were taken from the JSON which the checkboxes are mapped from, but my problem occurs if the minimum is above 1, as the function does -1 so if the minimum was 2 it leaves a remainder of 1 checked box. You can see from the demo the difference between orders 1 and orders 2.
Full Code: https://codesandbox.io/embed/zo27pvx8l?fontsize=14
Note: I am allowing deselecting on purpose for adding warning signs later on and giving the ability to switch between the selected options, I am trying to find a logical approach where anything can be unselected regardless of the minimum.
Function
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;
}
}
}
Aucun commentaire:
Enregistrer un commentaire