React Native のログイン画面に Formik を使用しています。ログイン要求後に明示的に false に設定したにもかかわらず、Formik が Field Touched を true に設定する際に発生した問題。
ここに私のフォームコードがあります:
class LoginForm extends Component {
static propTypes = {
navigation: PropTypes.object,
loginRequest: PropTypes.func,
isSubmitting: PropTypes.bool
};
handleSubmit = (values, formikBag) => {
this.props.loginRequest(values.email, values.password);
formikBag.setFieldValue("password", "");
formikBag.setFieldTouched("password", false, false);
};
renderForm = (
values,
handleSubmit,
setFieldValue,
errors,
touched,
setFieldTouched,
isValid
) => (
<View style={styles.inputContainer}>
<AuthInput
placeholder="Email address"
value={values.email}
onChange={setFieldValue}
onTouch={setFieldTouched}
name="email"
error={touched.email && errors.email}
editable={!this.props.isSubmitting}
/>
<AuthInput
placeholder="Password"
value={values.password}
onChange={setFieldValue}
onTouch={setFieldTouched}
name="password"
error={touched.password && errors.password}
editable={!this.props.isSubmitting}
secureTextEntry
/>
<ClearButton
text={BUTTON_TEXT_FORGOTTEN_PASSWORD}
onPress={() => {}}
containerStyles={styles.clearButtonContainer}
buttonTextStyles={styles.clearButtonText}
/>
<Button
onPress={handleSubmit}
disabled={!isValid || this.props.isSubmitting}
loading={this.props.isSubmitting}
>
{BUTTON_TEXT_LOGIN}
</Button>
</View>
);
render() {
return (
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={this.handleSubmit}
validationSchema={yupObject().shape({
email: yupString()
.email(ERROR_MESSAGE_INVALID_EMAIL_FORMAT)
.required(ERROR_MESSAGE_EMAIL_REQUIRED),
password: yupString()
.min(12, ERROR_MESSAGE_PASSWORD_MIN_LENGTH)
.required(ERROR_MESSAGE_PASSWORD_REQUIRED)
})}
render={({
values,
handleSubmit,
setFieldValue,
errors,
touched,
setFieldTouched,
isValid
}) =>
this.renderForm(
values,
handleSubmit,
setFieldValue,
errors,
touched,
setFieldTouched,
isValid
)
}
/>
);
}
}
const mapStateToProps = state => ({
isSubmitting: state.auth.isSubmitting
});
export default withNavigation(
connect(
mapStateToProps,
{ loginRequest }
)(LoginForm)
);
(ご参考までに: Formik のisSubmitting
値は使用しません。ログイン フローがもう少し複雑で、redux-saga を使用しているためです。)
handleSubmit
呼び出されてログイン要求が終了すると、パスワードの値が正しく消去されるようになりました。しかし、フィールドを明示的に触れないように設定しても、パスワードが必要なというエラーメッセージが表示されます。私は何を間違っていますか?
これと関係があるかどうかはわかりませんが、さらに次の警告が表示されます。
Warning: Failed prop type: Invalid prop `error` of type `boolean` supplied to `AuthInput`, expected `string`.
私のAuthInputは次のように見えるので、これは意味がありません:
class AuthInput extends PureComponent {
handleChange = value => {
const { onChange, name } = this.props;
onChange(name, value);
};
handleTouch = () => {
const { onTouch, name } = this.props;
onTouch(name);
};
render() {
const { placeholder, error } = this.props;
return (
<View>
<TextInput
autoCapitalize="none"
autoCorrect={false}
style={[styles.input, error ? styles.errorInput : null]}
placeholder={placeholder}
placeholderTextColor={colors.$lightGrey}
onChangeText={this.handleChange}
underlineColorAndroid="transparent"
onBlur={this.handleTouch}
{...this.props}
/>
{error && <Text style={styles.errorText}>{error}</Text>}
</View>
);
}
}
AuthInput.propTypes = {
placeholder: PropTypes.string,
name: PropTypes.string,
error: PropTypes.string,
onChange: PropTypes.func,
onTouch: PropTypes.func
};
export default AuthInput;