Question

我想问一下，这是一个场景。我有这个多个复选框但我的问题是每当我勾选一个复选框时，所有4个复选框都被选中。而且为什么复选框的值只是真或假。这是我的复选框：

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>

Answer 1

对于像我这样不熟悉redux和反应的人，可能会发现原来的代码here令人困惑。我修改并将其转换为ES6类。我还删除了bootstrap，验证并使其易于调试。

这是修改后的代码

import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            <div className="checkbox" key={index}>
                <label>
                    <input type="checkbox"
                           name={`${input.name}[${index}]`}
                           value={option.name}
                           checked={input.value.indexOf(option.name) !== -1}
                           onChange={(event) => {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                </label>
            </div>)
        });
    }

    render() {
        return (
            <div>
                {this.checkboxGroup()}
            </div>
        )
    }
}


export default CheckboxGroup;

用法：

let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]     
<Field name="roles" component={CheckboxGroup} options={optionsList} />

Answer 2

请为每个复选框指定不同的字段名称。 (name="investor_stage")。问题是所有字段名称都相同。

Answer 3

在@Aftab Naveed中添加一些样式我将复选框包装在带有这些类名的标签中，它们最终真正漂亮，易于点击：

ngAfterViewInit(): void {
    const orig_updateCheckedState = this._headerCheckBox.updateCheckedState;
    const me = this;
    this._headerCheckBox.updateCheckedState = function() {
        const cars: any[] = me._table.filteredValue || me._table.value;
        const selection: any[] = me._table.selection;
        let actRows: boolean = false;
        for (const car of cars) {
            if (!me.isRowDisabled(car)) {
                actRows = true;
                const selected = selection && selection.indexOf(car) >= 0;
                if (!selected) return false;
            }
        }
        if (actRows) {
            return true
        } else {
            return false;
        }
    };
}

我没有使用引导程序，我认为它是一个redux形式的东西，具有className“ form-check-label”

redux-form中的多个复选框

3 个答案: