我在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)
版本:
Redux呼叫链: 如您所见,在用户与输入进行任何交互之前,将调度UPDATE_SYNC_ERRORS事件。
感谢您的时间!
答案 0 :(得分:0)
我认为您可能希望使用辅助功能shouldError()来控制redux-form
何时选择执行其验证。
尽管该代码示例已过时,因为它使用了已弃用的shouldValidate()
,但您仍然可以通过查看此SO answer来了解如何使用shouldError()
。