no-image

redux-formでinputとradioとselectを実装してみるよ

Redux Advent Calendar 2017 4日目のエントリです。
advent calendar初投稿です。お手柔らかにお願いします。

React,Reduxアプリケーションの開発時のフォームの実装にredux-formを使ってみました。

 

公式ドキュメント

Github
https://github.com/erikras/redux-form

公式ページ
https://redux-form.com/7.2.0/

 

redux-formとは

Reduxのフォーム周りのライブラリです。
スターも多く、開発も活発なようです。

これを使わないでの、フォームの実装が大変だったので導入してみました。
まだ実装には至ってないですがバリデーションも簡単に実装できるようで便利そうです。

 

インストール

プロジェクト内でnpmでインストールします。
$ npm install --save redux-form

 

使い方

さいしょうのredux-form

基本的には公式ページのチュートリアルのようなものを見ればなんとなく使い方がわかると思うのですが、
step4が少々分かりづらかったので以下で補足しておきます。

また、公式ページにはいくつかのexampleが掲載されているので、見てみると参考になるかと思います。

redux-formを実装する場合に手を加える部分はreducerとcomponentのみです。
action,storeは特に触る必要はありません。

恐らく最小のフィールドを書いてみました。
これが最小のテンプレートになるかと思います。

 

ここではFieldの中のコンポーネントでは純粋なhtmlのinput要素を使用しています。

ちなみにですが、上のコードのSubmitのところの<button></button>はOnsenUIの<button></button>だと何故か反応しませんでした。
なので今回のコードでは純粋なhtmlのinput要素を使用し、実際に開発しているアプリ内ではreact-materializeの<button></button>を使用しています。

 

カスタムコンポーネントを使う場合

カスタムコンポーネントを使う場合は{...input}を忘れないように注意します。
これがないと、一見入力はできているのですが、redux-formのvaluesに値を伝えられていません。
なのでstateが変更されません。

 

そして上のコードのContactFormコンポーネントの親コンポーネントは以下のような感じです。

valueへのアクセス方法は
console.log(JSON.stringify(this.props.initialForm))
などで中身を確認して
上記コードの6行目のようにvalues["firstName"]のようにします。

 

親から子へpropsを伝えたい時

親から子へpropsを伝達したい場合はFieldに属性を追加することで、伝達することができます。

 

カスタム子コンポーネント内では、3行目のようにしてpropsを受け取ることでsel1のようにしてそのままアクセスすることができます。

 

ラジオボタン

次にラジオボタンを使う場合ですが、親の方ではtypeをradioにします。

 

そして子コンポーネントでは{...input}に加えて{...checked}も同時に記す必要があります。
これがないとstateが変更されません。

 

セレクトボックス

セレクトボックスもラジオボタンなどと同じでtypeをinputにし、{...input}を付します。
また、今回はユーザーがセレクトボックスを選択した後にactionを起こしたいので、FieldにonChangeを設定しています。

親コンポーネントはこんな感じです。

 

子コンポーネントはこんな感じです。

 

まとめ

基本的な使い方はこんな感じです。
バリデーションについても実装後に書きたいと思います。