Redux Form で複数のチェックボックスを使う

Redux Formでチェックボックスを使うには

const renderCheckbox = ({ input, label }) => (
  <Checkbox label={label}
    checked={input.value ? true : false}
    onCheck={input.onChange}/>
)

const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field name="employed" component={renderCheckbox} label="Employed"/>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
        </button>
      </div>
    </form>
  )
}

のようにして使います。

参考

http://redux-form.com/6.5.0/examples/material-ui/

ただこの方法だと、チェックボックスは

value='on'

となるため、複数チェックボックスがあった際に、どれがチェックされたかわからなくなってしまいます。

そのため、複数チェックボックスの際には以下のような対応が必要です。

Object.keys(data).forEach((key, index) => {
      list.push(
        <Field
          name={`hoge[${data[key].id}]`} // name={`hoge[]`}だとダメでした
          label={data[key].label}
          key={data[key].id}
          id={data[key].id}
          component={BaseCheckbox}
        />,
      );
    });

class BaseCheckbox extends Component {
  render() {
    const { input, label, meta: { touched, error }, ...custom } = this.props;
    return (
      <Checkbox
        {...custom}
        name={input.name}
        label={label}
        value={custom.id}
      />
    );
  }
}