作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我做了一个选择限制功能,确保总复选框高于最小值和低于最大值,这些值取自复选框映射的 JSON,现在选择限制有效,但我正在尝试添加验证以使用 onblur 显示警告,但我不确定如何将相同的函数转换为 onblur 验证函数。例如,如果有人取消选中,它会在控制台上显示您需要至少选择 3 个,直到选中 3 个,这与 selectData() 的逻辑相同。
函数
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;
}
}
}
最佳答案
您的一般方法似乎应该可行,只需要实际实现错误状态的技巧。不过这里的建议是更新您的 !isSelected && this.state.currentData < this.props.min
允许选择少于三个但向用户显示错误状态的条件。
...
} else {
if (this.state.currentData >= this.props.min) {
// this.setState({ currentData: this.state.currentData - 1 });
// UPDATE:
this.setState((state) => ({ currentData: state.currentData - 1 }));
} else {
event.preventDefault();
// Don't force the box to be selected, show error state instead
// Disable calls to filtering, sorting, etc. until error resolved
// event.currentTarget.checked = true;
}
}
}
关于javascript - 在 reactJS 中验证复选框的简单函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55151822/
我是一名优秀的程序员,十分优秀!