前提・実現したいこと
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を使用しています。
回答1件
あなたの回答
tips
プレビュー