毎日、何か新しいことを。4日目のエントリです。calendar初投稿です。お手柔らかにお願いします。React,Reduxアプリケーションの開発時のフォームの実装にredux-formを使ってみました。公式ドキュメントGithubhttps://github.com/erikras/redux-form公式ページhttps://redux-form.com/7.2.0/redux-formとはReduxのフォーム周りのライブラリです。スターも多く、開発も活発なようです。これを使わないでの、フォームの実装が大変だったので導入してみました。実装には至ってないですがバリデーションも簡単に実装できるようで便利そうです。インストールプロジェクト内でnpmでインストールします。redux-form使い方さいしょうのredux-form基本的には公式ページのチュートリアルのようなものを見ればなんとなく使い方がわかると思うのですが、step4が少々分かりづらかったので以下で補足しておきます。公式ページにはいくつかのexampleが掲載されているので、見てみると参考になるかと思います。redux-formを実装する場合に手を加える部分はreducerとcomponentのみです。action,storeは特に触る必要はありません。最小のフィールドを書いてみました。これが最小のテンプレートになるかと思います。createStore(rootReducer)ここではFieldの中のコンポーネントでは純粋なhtmlのinput要素を使用しています。ContactFormちなみにですが、上のコードのSubmitのところの<button></button>はOnsenUIの<button></button>だと何故か反応しませんでした。今回のコードでは純粋なhtmlのinput要素を使用し、実際に開発しているアプリ内ではreact-materializeの<button></button>を使用しています。カスタムコンポーネントを使う場合カスタムコンポーネントを使う場合は{...input}を忘れないように注意します。これがないと、一見入力はできているのですが、redux-formのvaluesに値を伝えられていません。stateが変更されません。コレclassName="input-fields"label="ニックネームを入力してください"/></div>)}}そして上のコードのContactFormコンポーネントの親コンポーネントは以下のような感じです。(<ContactForm{...this.props}onSubmit={this.submit}/>)}}valueへのアクセス方法はconsole.log(JSON.stringify(this.props.initialForm))などで中身を確認して上記コードの6行目のようにvalues["firstName"]のようにします。親から子へpropsを伝達したい場合はFieldに属性を追加することで、伝達することができます。this.props.choosingDepartment()}/>カスタム子コンポーネント内では、3行目のようにしてpropsを受け取ることでsel1のようにしてそのままアクセスすることができます。(<div>{sel1}</div>)}}ラジオボタン次にラジオボタンを使う場合ですが、親の方ではtypeをradioにします。/>123456<Fieldname="sex"component={MaleField}type="radio"value="male"/>そして子コンポーネントでは{...input}に加えて{...checked}も同時に記す必要があります。これがないとstateが変更されません。(<Row><Input{...checked}{...input}type='radio'value='male'label="男"/></Row>)}}セレクトボックスセレクトボックスもラジオボタンなどと同じでtypeをinputにし、{...input}を付します。今回はユーザーがセレクトボックスを選択した後にactionを起こしたいので、FieldにonChangeを設定しています。親コンポーネントはこんな感じです。this.props.choosingValue()}/>子コンポーネントはこんな感じです。value="4">4</option></Input>)}}まとめ基本的な使い方はこんな感じです。バリデーションについても実装後に書きたいと思います。app)をちょっとだけ触ってみる。コメントをキャンセルメールアドレスが公開されることはありません。