Проверка Formik для исходного базового ввода - PullRequest
Новая
       40

Проверка Formik для исходного базового ввода

4 голосов
/ 29 апреля 2020

Я использую поле ввода нативной базы и пытаюсь проверить его с помощью Formik и Yup. Однако никакой проверки пока не происходит. Он не показывает никаких ошибок, даже если я набираю алфавиты.

Этот код работает (без Formik): 

type EmailRegistrationProps = {};

interface FormValues {
  friendEmail: string;
}

type AddFriendEmailPageProps = {
  toggleShowPage: () => void;
  showAddFriendEmailPage: boolean;
};

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const [friendEmail, setFriendEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const validationSchema = emailValidationSchema; 

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

  useEffect(() => {
    if (showAddFriendEmailPage) return;
    setFriendEmail('');
  }, [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) {
          setErrorMessage('User Not Found');
        } else {
          addFriend(Number(data.users.nodes[0].id));
        }
      }
    },
    [friendEmail, addFriend],
  );

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

  const handleSubmit = React.useCallback(() => {
    loadUsers({
      variables: {
        where: { email: friendEmail },
      },
    });
    setFriendEmail('');
  }, [loadUsers, 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 style={scaledAddFriendEmailStyles.searchTopMiddleText}>
                Add Friend by Email
              </Text>
              <Text style={scaledAddFriendEmailStyles.searchCancelDoneText}>
                Done
              </Text>
            </View>
            <View style={scaledAddFriendEmailStyles.searchFieldContainer}>
              <Item style={scaledAddFriendEmailStyles.searchField}>
                <Input
                  placeholder="Email"
                  style={scaledAddFriendEmailStyles.searchText}
                  onChangeText={(text) => setFriendEmail(text)}
                  value={friendEmail}
                  autoCapitalize="none"
                />
              </Item>
              <View style={scaledAddFriendEmailStyles.buttonContainer}>
                <Button
                  rounded
                  style={scaledAddFriendEmailStyles.button}
                  onPress={() => handleSubmit()}
                >
                  <Text style={scaledAddFriendEmailStyles.text}>
                    Add Friend{' '}
                  </Text>
                </Button>
              </View>
              {/* </View>
                )}
              </Formik> */}
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

Теперь я пытаюсь добавить Formik:

РЕДАКТИРОВАТЬ: 

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

  //const [friendEmail, setFriendEmail] = useState('');
  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 et c. Но сейчас friendEmail не может быть найдено. Я просто не могу правильно слить Formik таким образом, чтобы я также мог сбросить значения, как при использовании useState.

1 Ответ

2 голосов
/ 05 мая 2020

Formik требует использования компонента <Field /> для проверки.

<Field /> автоматически подключит входы к Formik. Он использует атрибут name, чтобы соответствовать состоянию Formik. <Field /> по умолчанию будет HTML <input /> элементом.

Пользовательские компоненты можно установить с помощью component prop .

. например, 

<Field
    component={Input}
    name="phoneNumber"
    placeholder="Phone Number"
    onChangeText={handleChange}
    onBlur={handleBlur}
    type='tel'
    value={values.phoneNumber}
/>

Обновление

Ах, мой плохой, я обновил onChangeText и onBlur, чтобы отразить изменения. В текущей реализации вы фактически запускаете «обрабатывать» события при загрузке, а не когда происходит даже. Если вы введете name, он должен автоматически передать эту информацию. Кроме того, вы должны установить тип для ввода. Я обновил приведенный выше пример для всех этих обновлений.

...