ReactNative : redux-form立即验证输入

Question

我正在尝试在react-native中使用redux-form。当我在web应用程序中使用redux-forms时，我试图做一些我曾经做过的事情。我正在尝试使用redux-form验证表单，但我立即看到的是验证，而不是触发onBlur或焦点更改时的验证。

下面是我的代码：

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",

注意:下图中的警报是在第一次加载应用程序时发出的，在后台您可以看到显示的验证错误。

​

​

任何帮助都是非常感谢的。谢谢。

Answer 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>
);