javascript - 如何要求用户至少选择一个复选框才能提交表单?
问题描述
我有一个复选框组组件,我想对其进行一些输入验证。在用户提交表单之前,至少需要选中一个复选框。
<legend>Choose field names</legend>
<CheckboxGroup
checkboxDepth={5}
name="fieldNames"
value={this.state.fieldNames}
onChange={this.fieldNamesChanged}
required
>
{fields &&
fields.map(field => {
return (
<li>
<Checkbox value={field.name} />
{field.name}
</li>
);
})}
使用我目前在我的代码和框中的内容,可以在不选择任何复选框的情况下提交表单。是否可以使用该required
属性来解决此问题,或者我是否需要跟踪此组件之外的选定框?
解决方案
// include a value in your state defaults
this.state = {
...,
submitDisabled: true
};
// update the value when a checkboxe's value changes
fieldNamesChanged = newFieldNames => {
this.setState({
...,
submitDisabled: !newFieldNames.length
});
};
// use the state value to toggle the disabled property
<button
...
disabled={this.state.submitDisabled}>
Submit
</button>
推荐阅读
- reactjs - 使用带有 grahql 的 AWS 放大创建新用户时出现“未经授权”错误
- mapbox - 某些地区的 MapBox 数据质量问题
- angular - NGRX 使用 CombineLatest 防止无限循环
- javascript - 如何在没有任何新依赖项的情况下在 React JS 中使用此 CSS 代码?
- angular - 角度将属性总和绑定到属性
- amazon-web-services - 更改 docker 映像时更新 Sagemaker 端点
- c# - SignalR,如何验证连接 ID 是否仍处于活动状态?
- javascript - javascript:未捕获的类型错误:无法读取未定义的属性“X”
- c# - C# WPF 材料设计 MaterialDesignFlatButton 提示\高光颜色
- arrays - 如何在本机反应中从屏幕 B 调用或传递方法到屏幕 A?