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

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

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

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

React.js

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

解決済

react-reduxでrendering後にformのvalueが保持されるのを解決したい

AtsushiKamei
AtsushiKamei

総合スコア0

Redux

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

React.js

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

1回答

0評価

0クリップ

15閲覧

投稿2018/07/17 11:39

編集2022/01/12 10:58

前提・実現したいこと

react-reduxでwebアプリのログイン画面のデモをつくっています。
2段階認証にSMS認証を使っているのですが、そこの画面遷移がうまくいきません。

電話番号が入力されるとrenderingでcomponentを切り替えてsmsコードを入力する画面に移るのですが、その際に<input>に入力された電話番号がsmsコードを入力する<input>に表示されてしまいます。
原因がわからないので、考えうる原因を教えていただけると幸いです。

該当のソースコード (store.js)

react.js

const initialState = { page : 'login', isLoggedIn: true, authInfo: { userName: '', password: '', phoneNumber: '', smsCode: '', }, authType: 'sms', uploadFile: { name: '' }, downloadFileList: [{}], } function reducer(state = initialState, action) { switch (action.type) { case 'CHANGE_PAGE': console.log('redirecting:', action.page) return { ...state, page: action.page } case 'CHANGE_AUTH_INFO': return { ...state, authInfo: action.authInfo } default: return state } }

該当のソースコード (action.js)

export const changePage = (page) => { console.log('changePage action page:', page) return { type: 'CHANGE_PAGE', page } } export const changeAuthInfo = (authInfo) => { return { type: 'CHANGE_AUTH_INFO', authInfo } }

該当のソースコード (app.js)

react.js

onKeyUpPhoneNumber(e) { let phoneNumber = this.replaceNoNumber(e.target.value) e.target.value = phoneNumber store.dispatch(changeAuthInfo({ ...this.props.authInfo, phoneNumber, })) return true } onClickPhoneNumber() { store.dispatch(changePage('authSMS')) } onKeyUpSmsCode(e) { let smsCode = this.replaceNoNumber(e.target.value) e.target.value = smsCode store.dispatch(changeAuthInfo({ ...this.props.authInfo, smsCode, })) return true } phoneNumber() { return(    〜 <Field> <Control id="input-phoneNumber"> <Input className='is-primary' autoFocus={true} maxLength="11" placeholder="電話番号" onKeyUp={(e) => this.onKeyUpPhoneNumber(e)} /> </Control> </Field> <Field> <Control> <Button className='is-primary' onClick={e => this.onClickPhoneNumber(e)}>確認</Button> </Control> </Field>     〜 ) } authSMS() { return(   〜 <Field> <Control className="input-sms"> <Input className="is-primary" autoFocus={true} maxLength="4" placeholder="4-digits" onKeyUp={(e) => this.onKeyUpSmsCode(e)} /> </Control> </Field> <Field> <Control> <Link to='/home'> <Button className='is-primary'>確認</Button> </Link> </Control> </Field>   〜 ) } render() { switch (this.props.page) { case 'phoneNumber': return this.phoneNumber() case 'authSMS': return this.authSMS() default: return this.login() } } }

試したこと

電話番号の<Input>を囲んでる<Control>のみを消して、SMSコードの<Input>を囲んでる<Control>を残すとうまくいったのですが、両方とも消すと電話番号がSMSの<Input>に残ってしまいました。

初心者なので、拙い質問で申し訳ありませんが、よろしくお願いします。

補足

<Field><Control>などはcssフレームワークのbloomerを使用しています。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Meganezaru
Meganezaru

2018/07/18 02:01

storeとコンポーネントの関連が、掲載されたソースだけでは読めない気がします。FieldやControlは、何かパッケージを利用しているのでしょうか?
AtsushiKamei
AtsushiKamei

2018/07/18 03:07 編集

説明不足で申し訳ありません。FieldやControlはcssフレームワークのbloomerを使っています。 補足を追記させていただきました。 ご指摘ありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Redux

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

React.js

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