複数のチェックボックスがレピュックス形式

Question

私は質問したいと思います。私はこの複数のチェックボックスを持っていますが、私の問題は1つのチェックボックスをチェックすると、4つのチェックボックスのすべてが選択されます。 Reduxのに慣れていないと、元のコードを見つけることが反応し、私のような人のために

<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

が混乱hereを述べた：そしてまた、なぜそれが、チェックボックスの値がちょうど真であるかfalse.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} />