Material UI のCheckBOXをRedux Formで使う

redux-formでMaterial UIを使用する例としては

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

に例が載っています。

ただ、redux-formとMaterial UIの相性が悪いといった話もあったりして、ちょっと癖がある感じがあります。

また、薄いラッパーとしては

https://github.com/erikras/redux-form-material-ui

がありますが、この程度であれば自前で実装してしまってもいいような気もしています。

上記のラッパーではCheckboxは

https://github.com/erikras/redux-form-material-ui/blob/master/src/Checkbox.js

のような実装になっています。

基本的にチェックボックスはvalue=’on’が渡されるようでしたが、今回は複数のチェックボックスでvalueに独自の値を渡したかったため、以下のようにして実装しました。

import React, { Component, PropTypes } from 'react';
// Redux
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Checkbox from 'material-ui/Checkbox';

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

BaseCheckbox.propTypes = {
  input: React.PropTypes.shape().isRequired,
  label: React.PropTypes.string.isRequired,
  meta: React.PropTypes.shape().isRequired,
};

export default BaseCheckbox;

注意点としては

const { input, label, meta: { touched, error }, ...custom } = this.props;

のようにして親からpropsを引き継いでいますが、inputで引き継がれる要素があまりないようなので、customで独自のパラメータを引き継ぐようにしています。