redux-form 中的多个复选框答案

【问题标题】：Multiple checkbox in redux-formredux-form 中的多个复选框
【发布时间】：2017-03-16 13:53:21
【问题描述】：

我想问一下，这是场景。我有这个多个复选框，但我的问题是每当我勾选一个复选框时，所有 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>

【问题讨论】：

ReduxForm 不支持复选框组。 This 可能会帮助您解决问题。
嗨@JyothiBabuAraja你有一个例子如何实现它。我很新反应：D。谢谢！
检查this 和example
是的，我确实尝试过，但是有一个错误，看起来它使用的是 redux-form 的 v5.5.3 而我使用的是 v6.5.0
我也在努力解决这个问题:-)，但还没有找到具体的答案。

标签： reactjs redux-form

【解决方案1】：

对于像我这样刚接触 redux 和 react 的人来说，可能会发现提到的原始代码 here 令人困惑。我对其进行了修改并将其转换为 ES6 类。我还删除了引导、验证并使其易于调试。

这是修改后的代码

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} />

【讨论】：

非常感谢@aftab-naveed ！ optionsList 对象是什么样的？我尝试实现它但没有成功。
让 optionList = {id: 1, name: 'Optoin1', id: 2, name: 'Option 2'}
很好，但是，触摸事件对我不起作用，它总是错误的。第一次提交表单后，touched 事件开始触发。 const {options, name, input, meta: {touched, error }} = this.props; const hasError = touch && error;
效果很好；出于某种原因，我不得不更改为 newValue: const newValue = [...input.value] || []
我需要 jQuery 吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

为@Aftab Naveed 添加一些样式我将我的复选框包裹在一个带有这些类名的标签中，它们最终变得非常漂亮且更容易点击：

<label key={option.name} className="form-check-label" style={ {"fontSize": "1.5em"} }>
          <input ... />
            <span>{option.name}</span>
          </label>

我没有使用引导程序，我认为它是一个带有 className "form-check-label" 的 redux 表单

【讨论】：