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

时间:2019-02-10 23:06:18

标签: javascript reactjs react-native redux redux-form

我在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呼叫链: enter image description here 如您所见,在用户与输入进行任何交互之前,将调度UPDATE_SYNC_ERRORS事件。

感谢您的时间!

1 个答案:

答案 0 :(得分:0)

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

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