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

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

ただいまの
回答率

90.50%

  • React.js

    832questions

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

  • Redux

    112questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 121

AtsushiKamei

score 1

 前提・実現したいこと

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

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

 該当のソースコード (store.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
  }
}

const store = createStore(reducer);

 該当のソースコード (app.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()
  }
}

}

const mapStateToProps = (store) => {
  return {
    page: store.page,
    authInfo: store.authInfo,
    authType: store.authType,
  }
}

export default connect(mapStateToProps)(Login)

 試したこと

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

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

 補足

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Meganezaru

    2018/07/18 11:01

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

    キャンセル

  • AtsushiKamei

    2018/07/18 12:04 編集

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

    キャンセル

回答 1

checkベストアンサー

0

現状、ReduxのstoreがInputに結びつけられていないことが原因ではないでしょうか?
それぞれのInputのValueに該当するstateを代入すれば、期待通りに動くと思います。

(ソースには掲載されていないですが、react-reduxのconnectは正しく呼び出されていると仮定しています。)

...
<Input className='is-primary' autoFocus={true} maxLength="11" placeholder="電話番号"
    onKeyUp={(e) => this.onKeyUpPhoneNumber(e)}
    value={this.props.authInfo.phoneNumber}
 />
...

...
<Input className="is-primary" autoFocus={true} maxLength="4" placeholder="4-digits"
    onKeyUp={(e) => this.onKeyUpSmsCode(e)}
    value={this.props.authInfo.smsCode}
/>
...

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/19 19:28

    回答ありがとうございます。

    早速ためしてみたところ、電話番号は表示されなくなりましたが、今度は入力ができなくなりました。
    この場合、キーが押されるたびにpropsを書き換えるしかないのでしょうか?

    キャンセル

  • 2018/07/19 20:48

    onKeyUp~で、更新されているように見えたので、大丈夫だと思いましたが・・・

    ちなみに、changeAuthInfo()の中身は、どんな内容でしょうか?

    キャンセル

  • 2018/07/19 21:33

    キーが押されるたびに・・・は、その通りです。
    Inputの場合、onChangeのハンドラから、e.target.valueを含むactionをdispatchすることが多いと思います。

    キャンセル

  • 2018/07/20 13:34

    調べて見たところ,uncontrolled component ? がどうたらみたいな話らしいのですが、よくわからなかったです。

    changeAuthInfo()の中身を追記しました!

    キャンセル

  • 2018/07/20 23:02

    changeAuthInfoは、問題ないように見えますね…

    ソースの全容がわからないので、あとは、connectが上手くできていないぐらいしか想像がつきませんね(´Д` )

    キャンセル

  • 2018/07/21 08:41

    念のためconnectも追記しておきました。

    ご回答くださってありがとうございました。
    試したことの中にも書いてる通り、<Control>を消せば一応は正しく動くので、それでやってみます。

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • React.js

    832questions

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

  • Redux

    112questions