Redux Form + React Native Elements запускает проверку слишком рано

Question

Я использую приставку-форму в React Native вместе с React Native Elements для создания форм.Проблема в том, что после отображения экрана вызываются проверки, прежде чем пользователь даже успел коснуться полей ввода, что слишком рано показывает ошибку проверки ввода.

Мой код:

FormInput:

import React from 'react'
import { Input } from "react-native-elements";

export default FormInput = (props) => {
    const { input, meta: { error }, ...inputProps } = props

    return <Input {...inputProps}
        onChangeText={input.onChange}
        onBlur={input.onBlur}
        onFocues={input.onFocus}
        value={input.value}
        errorMessage={error}
        />
}

LoginForm:

import React from 'react';
import { reduxForm, Field, isDirty } from 'redux-form/immutable';
import { View, Image } from 'react-native';
import { Button } from "react-native-elements";
import { required, email } from 'redux-form-validators'

import FormInput from "./FormInput";

import styles from "./Styles/LoginFormStyles";
import Colors from '../Themes/Colors'

const bla = (value) =>  {
    console.tron.log('value = ' + value)
    return value !== undefined ? undefined : 'is required'
}

const LoginForm = (props) => {
    const { handleSubmit, submitting } = props

    return (
        <View style={styles.container}>
            <Image source={require('../Images/logo.png')} style={styles.logoContainer} resizeMode='center' />
            <View style={styles.buttonHolderContainer}>
                <Field name="email" validate={bla} textContentType="emailAddress" keyboardType="email-address" autoCapitalize = 'none' component={FormInput} placeholder="Email" containerStyle={styles.inputContainerHolder} />
                <Field name="password" validate={[required()]} secureTextEntry component={FormInput} placeholder="Senha" containerStyle={styles.inputContainerHolder} />
                <Button title="Entrar" style={{ marginTop: 10 }} buttonStyle={{ backgroundColor: Colors.appColor }} titleStyle={{ color: 'black' }}
                    onPress={handleSubmit} loading={submitting} disabled={submitting}/>
            </View>
        </View>
    )
}

export default reduxForm({ form: 'LoginForm'})(LoginForm)

Версии:

• "реагировать-нативный": "0.57.7",
• "response-native-elements": "^ 1.0.0",
• "реагировать-навигация": "3.1.3",
• "реагировать-избыточно": "^ 5.0.6 ",
• " redux ":" ^ 4.0.0 ",
• " redux-form ":" ^ 8.1.0 "

Reduxцепочка вызовов: Как видите, событие UPDATE_SYNC_ERRORS отправляется до того, как пользователь взаимодействует со входом.

Спасибо за ваше время!

Answer 1

Я думаю, что вы можете захотеть использовать вспомогательную функцию shouldError () , чтобы вы могли контролировать, когда redux-form решит выполнить ее проверку.

Хотя пример кода отсутствует- потому что он использует устаревший shouldValidate(), вы все равно можете получить представление о том, как использовать shouldError(), взглянув на этот SO ответ .