ReactNative:redux-form验证输入立即
问题描述:
我正在尝试使用redux-form
和react-native
。当我使用redux-form
作为网络应用程序时,我试图做一些我所做的事情。我正在尝试使用redux-form
验证表单,但我立即看到验证,而不是触发onBlur
或重点更改。ReactNative:redux-form验证输入立即
这里是我的代码:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { reduxForm, Field } from 'redux-form';
import {
View,
TextInput,
TouchableHighlight,
Text,
KeyboardAvoidingView,
StyleSheet,
} from 'react-native';
const renderTextInput = ({
input: { onChange, ...restInput }, // eslint-disable-line
placeholder, // eslint-disable-line
autoCapitalize, // eslint-disable-line
maxLength, // eslint-disable-line
isPassword, // eslint-disable-line
isEmail, // eslint-disable-line
meta: { touched, error, warning }, // eslint-disable-line
}) => (
<View style={{ width: '100%', paddingBottom: 15 }}>
<TextInput
onChangeText={onChange}
style={[styles.textInput, { width: '100%' }]}
placeholder={placeholder}
autoCapitalize={autoCapitalize}
maxLength={maxLength}
secureTextEntry={isPassword || false}
keyboardType={isEmail ? 'email-address' : 'default'}
{...restInput}
/>
{error && <Text style={{ color: 'red' }}>{error}</Text>}
</View>
);
class SignUp extends Component {
static propTypes = {
handleSubmit: PropTypes.func.isRequired,
}
onFormSubmit = (values) => {
alert(JSON.stringify(values));
}
render() {
const { handleSubmit } = this.props;
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={false}
>
<Field
name="email"
placeholder="Email Address"
autoCapitalize="none"
isEmail
maxLength={50}
component={renderTextInput}
/>
<Field
name="password"
placeholder="Password"
maxLength={50}
isPassword
autoCapitalize="none"
component={renderTextInput}
/>
<TouchableHighlight
onPress={() => handleSubmit(this.onFormSubmit)}
underlayColor="transparent"
style={{ height: 40, width: '100%', backgroundColor: '#005abc' }}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: 'white', fontSize: 18 }}>
Sign Up!
</Text>
</View>
</TouchableHighlight>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
// styles
});
// Why is this triggering immediately as the screen loads ?
const validate = (values) => {
alert(JSON.stringify(values));
const errors = {};
if (!values.email) errors.firstName = 'Email is required...';
return errors;
};
export default reduxForm({
form: 'signUpForm',
validate,
})(SignUp);
套餐:
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-navigation": "^1.1.236",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-form": "^7.1.1",
注:下图中的警报是当应用程序被加载第一次,并在后台可以看到验证错误正在显示。
任何帮助表示赞赏。谢谢。
答
我不得不使用meta
对象的touched
属性。我的最终功能是渲染输入如下:
const renderTextInput = ({
...,
meta: { touched, error, warning }, // added 'touched' here
}) => (
<View style={{ width: '100%', paddingBottom: 15 }}>
<TextInput
...
/>
{touched && error && <Text style={{ color: 'red', fontWeight: 'bold' }}>{error}</Text>}
</View>
);
难道你不应该有一个窗体,用onSubmit属性来包装所有的字段吗? –
此外,我会检查用新版本的Redux Form导出表单的新语法。在页面的大约一半处,您可以看到正确导出方式的示例。不知道你的是否正确,但我知道它已经改变了以前的版本,并有时会弄虚作假。 https://redux-form.com/7.1.1/docs/gettingstarted.md/ –
@DanielZuzevich:感谢您的意见。我解决了它。我必须做的是在显示错误的同时使用“被触摸”属性。这只会在触摸输入时触发错误。 ''{{touch && error && {error} }''' –