本地基本输入的Formik验证

Question

bounty到期在3天内。该问题的答案有资格获得+ 50声望赏金。FSJ想要引起更多关注对此问题。

我正在使用本机库的输入字段，并尝试使用Formik和Yup对其进行验证。但是，到目前为止，尚未进行任何验证。即使输入字母也不会显示任何错误。

模式：

const phoneNumberValidationSchema = yup.object().shape({
    phoneNumber: yup
      .string()
      .label('phoneNumber')
      .required('Bitte gebe deine Handynummer ein.')
      .matches(/^[0-9]*$/, 'Bitte nur Ziffern eingeben.'),
  });

const initialValues: FormValues = {
    phoneNumber: '',
  };
  const validationSchema = phoneNumberValidationSchema;

  const handleSubmit = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
    console.log('Verifying');
  };

这是我的返回函数：

 <Formik
                initialValues={initialValues}
                onSubmit={handleSubmit}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                  values,
                }) => (
                  <View>
                    <Item>
                      <Input
                        placeholder="Phone Number"
                        onChangeText={handleChange('phoneNumber')}
                        onBlur={handleBlur('phoneNumber')}
                        value={values.phoneNumber}
                      />
                    </Item>
                    <View >
                      <Button rounded >
                        <Text >
                          Add{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>

我想念什么？

编辑：

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const initialValues: FormValues = {
    friendEmail: '',
  };

  const [errorMessage, setErrorMessage] = useState('');
  const validationSchema = emailValidationSchema; 

  const showAlert = () => {
    Alert.alert('Friend Added');
  }

  useEffect(() => {
    if (showAddFriendEmailPage) return;
    initialValues.friendEmail = '';
  }, [showAddFriendEmailPage]);

  const _onLoadUserError = React.useCallback((error: ApolloError) => {
    setErrorMessage(error.message);
    Alert.alert('Unable to Add Friend');
  }, []);

  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
      called: isMutationCalled,
    },
  ] = useCreateUserRelationMutation({
    onCompleted : ( data: any) => {
      showAlert();
    }
  });

  const addFriend = React.useCallback(
    (id: Number) => {
      console.log('Whats the Id', id);
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Friend, userId: 7 },
        },
      });
    },
    [createUserRelationMutation],
  );

  const getFriendId = React.useCallback(
    (data: any) => {
      console.log('Email', friendEmail);
      if (data) {
        if (data.users.nodes.length == 0) {
          console.log('No user');
          setErrorMessage('User Not Found');
          Alert.alert('User Not Found');
        } else {
          console.log('ID', data.users.nodes[0].id);
          addFriend(Number(data.users.nodes[0].id));
        }
      }
    },
    [friendEmail, addFriend],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getFriendId,
    onError: _onLoadUserError,
  });

  const handleSubmit = React.useCallback((
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
    ) => {
    console.log('Submitted');
    loadUsers({
      variables: {
        where: { email: values.friendEmail },
      },
    });
    //setFriendEmail('');
    values.friendEmail = '';
  }, [loadUsers, initialValues.friendEmail]);
  }


  return (
    <Modal
      visible={showAddFriendEmailPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={scaledAddFriendEmailStyles.container}>
          <View style={scaledAddFriendEmailStyles.searchTopContainer}>
            <View style={scaledAddFriendEmailStyles.searchTopTextContainer}>
              <Text
                style={scaledAddFriendEmailStyles.searchCancelDoneText}
                onPress={toggleShowPage}>
                Cancel
              </Text>
              <Text >
                Add Friend by Email
              </Text>
              <Text>
                Done
              </Text>
            </View>
            <View style={scaledAddFriendEmailStyles.searchFieldContainer}>
               <Formik
                initialValues={initialValues}
                onSubmit={handleSubmit}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                  values,
                }) => ( 
                  <Field
                  component={Input}
                  placeholder="Email"
                  onChangeText={handleChange('friendEmail')}
                  onBlur={handleBlur('friendEmail')}
                  value={values.friendEmail}
                  autoCapitalize="none"
                  />
                )}
                </Formik>
              <View >
                <Button
                  onPress={() => handleSubmit()}
                >
                  <Text >
                    Add Friend{' '}
                  </Text>
                </Button>
              </View>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

当前，这不适用于我。我想继续使用旧的handleSubmit，通过按钮的onPress提交。但是现在我不知道如何将值，助手传递到此handleSubmit：

onPress={() => handleSubmit()}

我得到Expected 2 arguments, but got 0.

但是如果我尝试通过values, helpers，则找不到这些名称。同样，我在使用

[friendEmail, addFriend],

getFriendId的结尾。如果我只使用setState而不进行formik验证等，则此方法正常工作。但是现在找不到friendEmail。

Answer 1

Formik要求您利用<Field />组件进行验证。

<Field />将自动将输入连接到Formik。它使用name属性与Formik状态进行匹配。 <Field />将默认为HTML <Field />元素。

您可以通过<input />设置自定义组件。

例如，您的情况：

component prop