LoginSignup
2
2

More than 5 years have passed since last update.

React Native と Redux Formの組み合わせでキーボード入力中にsubmitしても入力内容が反映されていない問題

Posted at

React NativeとRedux Formを組み合わせて(もちろんReduxは使用)利用した時にちょっとした問題に遭遇したので投稿します。
ちなみにiPhoneでしか確認していないので、Androidで同様かは不明です。

問題

ログインフォームなどでTextInputに入力する時、フォームにfocusされたままでログインボタンを押した場合、入力中の文字はdispatchされない。
次のスクリーンショットのような状況です。

Simulator Screen Shot - iPhone 6 - 2018-01-22 at 22.59.33.png

この状況だとログインボタンを押してもパスワードが入力されていない扱いになり、バリデーションエラーが表示されてしまいます。

解決方法

Redux FormのFieldのinput propsにonChange()があるので、TextInputonChangeText propに渡せば解決します。
Redux Form -Field

次のようにTextInputFormの部品を作ります。関係ない部分は削っています。

TextInputFormを利用した全体のコードは次の通りです。@decorator使ってます。

const TextInputForm = (props) => {
  const { input, style, label, ...inputProps } = props
  return (
    <View>
      <Text>{label}</Text>
      <TextInput
        {...inputProps}
        style={style}
        onChangeText={text => input.onChange(text)} //これを追加
      />
    </View>
  );
}

import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'
import { Text, TextInput, View, TouchableOpacity } from 'react-native'

@reduxForm({
  form: 'login',
  validate: values => {
    const errors = {}
    if (!values.id) errors.id = 'IDを入力してください'
    if (!values.password) errors.password = ' パスワードを入力してください'
    return errors
  }
})
export default class Login extends Component {
  login = values => {
    // 何か処理
  }

  render() {
    const { handleSubmit, error } = this.props
    return (
      <View style={styles.root}>
        <View>
          <Field
            name='id'
            label='ID'
            style={styles.input}
            component={TextInputForm}
          />
        </View>
        <View>
          <Field
            name='password'
            label='パスワード'
            style={styles.input}
            component={TextInputForm}
            secureTextEntry
          />
        </View>
        <TouchableOpacity onPress={handleSubmit(this.login)} style={styles.button}>
          <Text style={{color: '#fff', fontSize: 20}}>ログイン</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

これで解決するにはするのですが、onChangeTextが呼ばれる度にdispatchされているため、もしかするとパフォーマンスに影響がある可能性があります。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2