reactjs - 在reactjs中制作复选框必填字段

Question

我是反应 js 的新手。我想确保用户必须使用 reactjs 选择至少 1 个复选框。我采用的复选框值是动态的，即 zone_name。下面是代码：

    addCheckbox() {
    const { zones_to_render_to_render } = this.state,
        label = this.refs.label.value;

    zones_to_render_to_render.push({
        checked: true,
        label
    });

    this.setState({
        zones_to_render_to_render: zones_to_render_to_render.zone_name
    });
}

toggleCheckbox(event) {
    event.preventDefault()
    const { zones_to_render_to_render } = this.state;

    zones_to_render_to_render.checked = !zones_to_render_to_render.checked;

    this.setState({
        zones_to_render_to_render
    });
}
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>
        );
}

如果不选择至少 1 个复选框，则不应允许。

标签： reactjs