使用 React 使复选框字段成为必填项答案

【问题标题】：Make checkbox field mandatory using React使用 React 使复选框字段成为必填项
【发布时间】：2020-11-22 17:51:32
【问题描述】：

我想让复选框字段强制使用 react js 选择至少 1。

下面是我的代码：

 renderCheckboxes() {    
    const { zones_to_render_to_render, filter } = this.state;
    console.log(zones_to_render_to_render, filter)
    return zones_to_render_to_render
        .filter(checkbox =>
            filter === 'ALL' ||
            filter === 'CHECKED' && checkbox.checked ||
            filter === 'UNCHECKED' && !checkbox.checked
        )
        .map((checkbox, index) =>
            // console.log(checkbox, index)
            <div key={index}>
                <label>
                    <input
                        type="checkbox"
                        checked={checkbox.checked}
                        onChange={this.toggleCheckbox.bind(index)}                            
                    />
                    {checkbox.zone_name}
                </label>
            </div>
        );
}

任何帮助将不胜感激......

【问题讨论】：

在 React 的情况下，最好在提交组件中处理 required 和其他验证，而不是在渲染输入的地方。假设您在父组件的某处使用 ajax/axios - 在那里对必填字段进行验证。

标签： reactjs

【解决方案1】：

您可以使用Required 属性，它用于设置或返回在提交表单之前是否应检查输入复选框字段。更多详情请查看https://www.geeksforgeeks.org/html-dom-input-checkbox-required-property/

<form >  
  <input
     type="checkbox"
     checked={checkbox.checked}
     onChange={this.toggleCheckbox.bind(index)}
     required="required"                        
   />
</form >

【讨论】：

【解决方案2】：

请在复选框中添加一个必需的属性。

必填=“必填”

并将输入框包装到form 元素中。为表单定义一个onSubmit 处理程序，该处理程序可以使用输入的填充数据进行ajax 调用。

这里有更多参考

Reactjs - Form input validation

【讨论】：