Question

我在React Native中使用redux-form以及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)

版本：

“ react-native”：“ 0.57.7”，
“ react-native-elements”：“ ^ 1.0.0”，
“反应导航”：“ 3.1.3”，
“ react-redux”：“ ^ 5.0.6”，
“ redux”：“ ^ 4.0.0”，
“ redux-form”：“ ^ 8.1.0”

Redux呼叫链：如您所见，在用户与输入进行任何交互之前，将调度UPDATE_SYNC_ERRORS事件。

感谢您的时间！

Answer 1

我认为您可能希望使用辅助功能shouldError()来控制redux-form何时选择执行其验证。

尽管该代码示例已过时，因为它使用了已弃用的shouldValidate()，但您仍然可以通过查看此SO answer来了解如何使用shouldError()。

Redux Form + React Native Elements触发验证太早

1 个答案: