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

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

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

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

React.js

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

Q&A

解決済

1回答

419閲覧

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

AtsushiKamei

総合スコア9

Redux

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

React.js

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

0グッド

0クリップ

投稿2018/07/17 11:39

編集2018/07/20 23:37

前提・実現したいこと

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

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

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

react.js

1const initialState = { 2 page : 'login', 3 isLoggedIn: true, 4 authInfo: { 5 userName: '', 6 password: '', 7 phoneNumber: '', 8 smsCode: '', 9 }, 10 authType: 'sms', 11 uploadFile: { 12 name: '' 13 }, 14 downloadFileList: [{}], 15} 16 17function reducer(state = initialState, action) { 18 switch (action.type) { 19 case 'CHANGE_PAGE': 20 console.log('redirecting:', action.page) 21 return { 22 ...state, 23 page: action.page 24 } 25 case 'CHANGE_AUTH_INFO': 26 return { 27 ...state, 28 authInfo: action.authInfo 29 } 30 default: 31 return state 32 } 33}

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

react.js

1onKeyUpPhoneNumber(e) { 2 let phoneNumber = this.replaceNoNumber(e.target.value) 3 e.target.value = phoneNumber 4 store.dispatch(changeAuthInfo({ 5 ...this.props.authInfo, 6 phoneNumber, 7 })) 8 return true 9 } 10 11onClickPhoneNumber() { 12 store.dispatch(changePage('authSMS')) 13} 14 15 onKeyUpSmsCode(e) { 16 let smsCode = this.replaceNoNumber(e.target.value) 17 e.target.value = smsCode 18 store.dispatch(changeAuthInfo({ 19 ...this.props.authInfo, 20 smsCode, 21 })) 22 return true 23 } 24 25phoneNumber() { 26 return( 27   〜 28 <Field> 29 <Control id="input-phoneNumber"> 30 <Input className='is-primary' autoFocus={true} maxLength="11" placeholder="電話番号" 31 onKeyUp={(e) => this.onKeyUpPhoneNumber(e)} 32 /> 33 </Control> 34 </Field> 35 <Field> 36 <Control> 37 <Button className='is-primary' onClick={e => this.onClickPhoneNumber(e)}>確認</Button> 38 </Control> 39 </Field> 40    〜 41 ) 42} 43 44authSMS() { 45 return( 46  〜 47 <Field> 48 <Control className="input-sms"> 49 <Input className="is-primary" autoFocus={true} maxLength="4" placeholder="4-digits" 50 onKeyUp={(e) => this.onKeyUpSmsCode(e)} 51 /> 52 </Control> 53 </Field> 54 <Field> 55 <Control> 56 <Link to='/home'> 57 <Button className='is-primary'>確認</Button> 58 </Link> 59 </Control> 60 </Field> 61  〜 62 ) 63} 64 65 66render() { 67 switch (this.props.page) { 68 case 'phoneNumber': 69 return this.phoneNumber() 70 case 'authSMS': 71 return this.authSMS() 72 default: 73 return this.login() 74 } 75} 76 77} 78 79const mapStateToProps = (store) => { 80 return { 81 page: store.page, 82 authInfo: store.authInfo, 83 authType: store.authType, 84 } 85} 86 87export default connect(mapStateToProps)(Login) 88

試したこと

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

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

補足

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

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

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

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

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

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

Meganezaru

2018/07/18 02:01

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

2018/07/18 03:07 編集

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

回答1

0

ベストアンサー

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

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

JSX

1... 2<Input className='is-primary' autoFocus={true} maxLength="11" placeholder="電話番号" 3 onKeyUp={(e) => this.onKeyUpPhoneNumber(e)} 4 value={this.props.authInfo.phoneNumber} 5 /> 6... 7 8... 9<Input className="is-primary" autoFocus={true} maxLength="4" placeholder="4-digits" 10 onKeyUp={(e) => this.onKeyUpSmsCode(e)} 11 value={this.props.authInfo.smsCode} 12/> 13... 14

投稿2018/07/19 06:02

Meganezaru

総合スコア715

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

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

AtsushiKamei

2018/07/19 10:28

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

2018/07/19 11:48

onKeyUp~で、更新されているように見えたので、大丈夫だと思いましたが・・・ ちなみに、changeAuthInfo()の中身は、どんな内容でしょうか?
Meganezaru

2018/07/19 12:33

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

2018/07/20 04:34

調べて見たところ,uncontrolled component ? がどうたらみたいな話らしいのですが、よくわからなかったです。 changeAuthInfo()の中身を追記しました!
Meganezaru

2018/07/20 14:02

changeAuthInfoは、問題ないように見えますね… ソースの全容がわからないので、あとは、connectが上手くできていないぐらいしか想像がつきませんね(´Д` )
AtsushiKamei

2018/07/20 23:41

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問