0

如何使用 formik 和 yup 在此处显示错误消息?假设我想显示客户名称的错误消息。这个怎么做?

    import React, { Component } from 'react';
    import { Text,Alert, TextInput, View, StyleSheet, KeyboardAvoidingView,  ActivityIndicator,  TouchableOpacity, Image, Animated, Easing,} from 'react-native';
    import { Button } from 'react-native-elements'
    import PropTypes from 'prop-types';
    import Dimensions from 'Dimensions';
    import { Router, Scene, Actions } from 'react-native-router-flux';
    import * as Yup from 'yup';
    import { Formik } from 'formik';

    import eyeImg from '../images/eye_black.png';

    const DEVICE_WIDTH = Dimensions.get('window').width;
    const DEVICE_HEIGHT = Dimensions.get('window').height;

我也声明了 initialValues。请帮我。

    const initialValues = {
      customer_name: "",
      mobile: "",
      password: "",
      repassword: "",
      email_address: "",
      company_id: "",
      profile_image: "",
      licence_number: "",
      user_status: "Active",
    };

这是我的错误信息。

    const customervalidation = Yup.object().shape({
       customer_name: Yup.string().required("Please enter name"),
       email_address: Yup.string()
                     .required("Please enter email address")
                     .email('Please enter a valid email'),
       mobile: Yup.string().required("Please enter mobile"),
       password: Yup.string().required("Please enter password"),
       repassword: Yup.string().oneOf([Yup.ref('password'), null], 'Passwords must match')
    });



    export default class Form extends Component {
      constructor(props) {
        super(props);

        this.state = {
          customer_name: '',
          mobile: '',
          password: '',
          cpassword: '',
          email_address: '',
          showPass: true,
          showConfPass: true,

          press: false,
        };

        this.showPass = this.showPass.bind(this);
        this.showConfPass = this.showConfPass.bind(this);
        this._onPress = this._onPress.bind(this);
      }

      showPass() {
        //Alert.alert('Credentials', `${this.state.press}`);
        this.state.press === false
          ? this.setState({showPass: false, press: true})
          : this.setState({showPass: true, press: false});
      }

      showConfPass() {    
        this.state.press === false
          ? this.setState({showConfPass: false, press: true})
          : this.setState({showConfPass: true, press: false});
      }

这实际上是我的 API 注册部分。

      onSignup() {
        const { customer_name, mobile, password, cpassword, email_address } = this.state;    
        Alert.alert('Credentials', `${customer_name} + ${mobile} + ${password} + ${cpassword} + ${email_address}`);

        fetch('url', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({  
            customer_name: this.state.customer_name,   
            mobile: this.state.mobile,
            email_address: this.state.email_address,
            password: this.state.password,      
          })    
        }).then((response) => response.json())
          .then((responseJson) => {
          alert('Success');
        }).catch((error) => {
          alert('Error');
        });
      }

      _onPress() {
        if (this.state.isLoading) return;
        this.setState({isLoading: true});
            Animated.timing(this.buttonAnimated, {
          toValue: 1,
          duration: 200,
          easing: Easing.linear,
        }).start();

        setTimeout(() => {
          this._onGrow();
        }, 2000);

        setTimeout(() => { 
          Actions.forgotpwdScree();
          this.setState({isLoading: false});
          this.buttonAnimated.setValue(0);
          this.growAnimated.setValue(0);
        }, 2300);
      }

我在这里添加了 formik 。我想在 setfieldtouch、onblur 和表单提交期间显示错误消息

      render() {
        return (      

          <Formik initialValues= {initialValues} validationSchema={customervalidation}>
            {({ values, errors, isValid, touched, setFieldTouched, isSubmitting }) => {
              return(
                <KeyboardAvoidingView behavior="padding" style={styles.container}>
                  <View style={styles.inputcontainer}>
                    <Text style={styles.textlabel}>NAME</Text>
                    <TextInput
                      value={this.state.customer_name}
                      onChangeText={(customer_name) => this.setState({ customer_name })}
                      placeholder={'Name'}
                      style={styles.input}
                    />
                    </View>

                    <View style={styles.inputcontainer}>
                    <Text style={styles.textlabel}>PHONE NUMBER</Text>
                    <TextInput
                      value={this.state.mobile}
                      onChangeText={(mobile) => this.setState({ mobile })}
                      placeholder={'Mobile Number'}
                      style={styles.input}
                    />
                    </View>

                    <View style={styles.inputcontainer}> 
                    <Text style={styles.textlabel}>PASSWORD</Text>
                    <TextInput
                      value={this.state.password}
                      secureTextEntry={this.state.showPass}
                      onChangeText={(password) => this.setState({ password })}
                      placeholder={'PASSWORD'}
                      returnKeyType={'done'}
                      autoCapitalize={'none'}
                      autoCorrect={false}
                      style={styles.input}
                    />
                    </View>
                    <TouchableOpacity
                      activeOpacity={0.7}
                      style={styles.btnEye}
                      onPress={this.showPass}>
                      <Image source={eyeImg} style={styles.iconEye} />
                    </TouchableOpacity>


                    <View style={styles.inputcontainer}> 
                    <Text style={styles.textlabel}>CONFIRM PASSWORD</Text>
                    <TextInput
                      value={this.state.cpassword}
                      secureTextEntry={this.state.showConfPass}
                      onChangeText={(cpassword) => this.setState({ cpassword })}
                      placeholder={'CONFIRM PASSWORD'}
                      returnKeyType={'done'}
                      autoCapitalize={'none'}
                      autoCorrect={false}
                      style={styles.input}
                    />
                    </View>
                    <TouchableOpacity
                      activeOpacity={0.7}
                      style={styles.btnEye2}
                      onPress={this.showConfPass}>
                      <Image source={eyeImg} style={styles.iconEye} />
                    </TouchableOpacity>

                    <View style={styles.inputcontainer}>
                    <Text style={styles.textlabel}>EMAIL ID</Text>
                    <TextInput
                      value={this.state.email_address}
                      onChangeText={(email_address) => this.setState({ email_address })}
                      placeholder={'Email Address'}
                      style={styles.input}
                    />
                    </View>

                    <View style={styles.inputcontainerB}>
                    <Text style={styles.textR} >I AGREE WITH UP TERMS</Text>
                    <Button
                      large         
                      title='SIGN UP'
                      icon={{name: 'lock', type: 'font-awesome'}}
                      onPress={this.onSignup.bind(this)}
                    />           
                  </View>
                </KeyboardAvoidingView> 
              );
            }}
          </Formik>
        );
      }
    }
4

1 回答 1

1

您可以使用:values、handleSubmit、handleChange、errors、touched、handleBlur,来自 formik 组件中的 render prop,Formik lib 已经对表单值进行了更新,因此不需要为此使用 state,例如,对于您需要添加一个 Text 组件来显示错误的 customer_name。

    <Formik
      initialValues={initialValues}
      onSubmit={this.onSignup}
      validationSchema={customervalidation}
      render={({
        values,
        handleSubmit,
        handleChange,
        errors,
        touched,
        handleBlur
      }) => (
       <KeyboardAvoidingView behavior="padding" style={styles.container}>
         <View style={styles.inputcontainer}>
           <Text style={styles.textlabel}>NAME</Text>
           <TextInput
             value={values.customer_name}
             onBlur={handleBlur('customer_name')}
             onChangeText={handleChange('customer_name')}
             placeholder={'Name'}
             style={styles.input}
           />
           <Text>{touched.customer_name && errors.customer_name}</Text>
         </View>
         ...
         <Button
           large         
           title='SIGN UP'
           icon={{name: 'lock', type: 'font-awesome'}}
           onPress={handleSubmit}
         />
       </KeyboardAvoidingView> 
       )
     />

handleSubmit 道具会将 onSubmit 道具中声明的函数传递给渲染器,渲染器将发送参数值,在您的情况下,它将具有在 initialValues 中声明的更新值

{
      customer_name: "",
      mobile: "",
      password: "",
      repassword: "",
      email_address: "",
      company_id: "",
      profile_image: "",
      licence_number: "",
      user_status: "Active"
}
于 2019-05-22T17:36:17.980 回答