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

注：下圖中的警報是當應用程序被加載第一次，並在後臺可以看到驗證錯誤正在顯示。

任何幫助表示讚賞。謝謝。

來源

2017-10-16 Abhishek Ghosh

難道你不應該有一個窗體，用onSubmit屬性來包裝所有的字段嗎？ –

此外，我會檢查用新版本的Redux Form導出表單的新語法。在頁面的大約一半處，您可以看到正確導出方式的示例。不知道你的是否正確，但我知道它已經改變了以前的版本，並有時會弄虛作假。 https://redux-form.com/7.1.1/docs/gettingstarted.md/ –

@DanielZuzevich：感謝您的意見。我解決了它。我必須做的是在顯示錯誤的同時使用「被觸摸」屬性。這隻會在觸摸輸入時觸發錯誤。 ''{{touch && error && {error}}''' –

我不得不使用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> 
);

來源

2017-10-17 01:39:47

ReactNative：redux-form驗證輸入立即

回答

相關問題