質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1333閲覧

redux-formのエラーチェック

warafuji12345

総合スコア13

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/08/30 13:56

編集2019/09/01 01:14

イメージ説明

redux-formを使用し、上記画面を作成しているのですが、**"input1に移す"のテキストボックスに値を入れ、"form1に移す"**ボタンを押下した時に、上部のテキストボックスに値を移したいのですが、どう実装すれば良いでしょうか。

また、**"input1に移す"**のテキストボックスが空まま、"form1に移す"ボタンを押下した時に、エラーチェックを実施したいのですが、こちらもどのように実装すれば良いか教えていただけないでしょうか。

ソースを下記に記載します。


App.js

import React from 'react'; import TestForm from './TestForm'; import { SubmissionError } from 'redux-form' export class App extends React.Component { handleSubmit(values) { // 何も入力されていないのでエラー if (typeof values.testInput1 === 'undefined' || values.testInput1 == null) { throw new SubmissionError({ testInput1: '入力してください。' }) } window.alert(values.testInput1); } render() { return ( <TestForm onSubmit={this.handleSubmit}> </TestForm> ); } }

TestForm.js

import React from 'react'; import { Field, reduxForm } from 'redux-form'; /* const ErrorMessages = { required: '必須項目です。', } const required = value => (value || typeof value === 'number' ? undefined : ErrorMessages.required) */ class TestForm extends React.Component { handleMoveForm1() { // TODO 1 ここでtestInput2の値を取得したい!!!!! const input2 = 'aaaaa'; // TODO 2 Input2の値が取得できない場合、エラーにする!!!! // input1に値を設定 this.props.change('testInput1', input2); // input2の値を空にする this.props.change('testInput2', ''); } renderField(field) { return( <div> <div> <input {...field.input} placeholder={field.placeholder} type={field.type} /> {field.meta.touched && field.meta.error && <span>{field.meta.error}</span>} </div> </div> ); } render() { const { handleSubmit} = this.props; return ( <form onSubmit={handleSubmit}> <div> <label>input1</label> <div> <Field name="testInput1" component={this.renderField} type="text" //validate={required} placeholder="test input1" /> </div> </div> <div> <label>input1に移す</label> <div> <Field name="testInput2" component={this.renderField} type="text" placeholder="" /> </div> </div> <div> <button type="submit">input1の値を表示</button> <button type="button" onClick={this.handleMoveForm1.bind(this)}>from1に移す</button> </div> </form> ); } }; export default reduxForm({ form: 'TestForm', // a unique identifier for this form })(TestForm);

store.js

import { createStore, combineReducers } from 'redux'; import { reducer as reduxFormReducer } from 'redux-form'; const reducer = combineReducers({ form: reduxFormReducer, }); const store = createStore(reducer); export default store;

index.js

import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import store from "./store"; import { App } from "./App"; const rootEl = document.getElementById("root"); ReactDOM.render( <Provider store={store}> <App /> </Provider>, rootEl );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

TODO1について

ReduxForm公式のサンプルにあるように、connect時にformValueSelectorを使用することでReduxFormが管理しているvalueをpropsに設定することが出来ます。

connect(state => ({ input2 = formValueSelector('フォーム名')(state, 'testInput2') ...
handleMoveForm1() { const input2 = this.props.input2; ...

※簡単な方法として、reduxFormReducerを使って this.props.form('フォーム名').values.testInput2 のように書いても取得できると思いますが、あまり綺麗な書き方ではないためおすすめしません。

TODO2について

こちらについてはvalidateを利用するのが良いと思います。
バリデーションを行う関数を用意し、reduxForm()にvalidateという名前で設定すればエラー時に何もSubmitされない等の挙動が実装出来ます。
参考: Sync Validation

補足

いずれも公式マニュアルに書いてあることですので、色々見て試してみると理解が深まりもっと使いこなせるようになると思います!

投稿2019/12/09 03:05

guissy-k

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問