无法输入 <Formik> 字段

Question

interface FormValues {
  friendEmail: string;
}

  const initialValues: FormValues = {
    friendEmail: '',
  };

export const Page: React.FunctionComponent<PageProps> = ({
  toggleShowPage,
  showPage,
}) => {

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

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

  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', initialValues.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));
        }
      }
    },
    [addFriend],
    //[friendEmail, addFriend],
  );

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

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

  if (!addingFriendLoading && isMutationCalled) {
    if (addingFriendData) {
      console.log('Checking');
    }
    if (addingFriendError) {
      console.log('errorFriend', addingFriendError.message);
    }
  }

  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}>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                  values,
                }) => (
                  <View>
                    <View>

                      <Item style={scaledAddFriendEmailStyles.searchField}>
                      <TextInput
                      style={scaledAddFriendEmailStyles.searchText}
                      placeholder="Email"
                      onChangeText={handleChange('friendEmail')}
                      //onChangeText={e => console.log('Workinggg')}
                      onBlur={handleBlur('friendEmail')}
                      value={values.friendEmail}
                      autoCapitalize="none"
                      />
                        {/* <Field
                          component={Input}
                          name='friendEmail'
                          placeholder="Email"
                          //handleChange={handleChange}
                          handleBlur={handleBlur}
                          //onChange={handleChange}                         
                          //onChangeText={handleChange('friendEmail')}
                          //onBlur={handleBlur('friendEmail')}
                          value={values.friendEmail}
                          autoCapitalize="none"
                        /> */}
                      </Item>
                    </View>
                    <View>
                      <Button                        
                        onPress={handleSubmit}>
                        <Text>
                          Add Friend{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

为什么我无法在输入字段中写入任何内容？我尝试过使用onChange和handleChangeboth，但这并没有什么不同。其他 SO 答案建议我应该删除 value，但我在网上看到的 Formik 用法示例另有说明。

我正在尝试按照这个进行我的 Formik 验证：

https://heartbeat.fritz.ai/build-and-validate-forms-in-react-native-using-formik-and-yup-6489e2dff6a2

编辑： 我也尝试过setFieldValue，但我仍然无法输入任何内容。

const initialValues: FormValues = {
  friendEmail: '',
};

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {

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

  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', initialValues.friendEmail);
      if (data) {
        if (data.users.nodes.length == 0) {
          console.log('No user');
        } else {
          console.log('ID', data.users.nodes[0].id);
          addFriend(Number(data.users.nodes[0].id));
        }
      }
    },
    [addFriend],
    //[friendEmail, addFriend],
  );

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

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

  return (
    <Modal
      visible={showPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={scaledAddFriendEmailStyles.container}>
            <View style={scaledAddFriendEmailStyles.searchFieldContainer}>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  setFieldValue,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                  values,
                }) => {
                  const setEmail = (friendEmail: string) => {
                    setFieldValue('friendEmail', friendEmail)
                  }
                return(
                  <View>
                    <View>

                      <Item>
                      <TextInput                     
                      placeholder="Email"
                      onChangeText={setEmail}
                      onBlur={handleBlur('friendEmail')}
                      value={values.friendEmail}
                      autoCapitalize="none"
                      />
                      </Item>
                    </View>
                    <View >
                      <Button
                        onPress={handleSubmit}>
                        <Text >
                          Add Friend{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                )}}
              </Formik>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

Answer 1

Formik 的 Field 组件还不支持 React native。更多详情请查看this github issue

但是，您可以使用 TextInput 代替字段并将其与 onChangeText 处理程序一起使用

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmitForm}
    validationSchema={validationSchema}>
    {({
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      values,
    }) => (
      <View>
        <View>
          <Item style={scaledAddFriendEmailStyles.searchField}>
            <TextInput
              placeholder="Email"
              onChangeText={handleChange('friendEmail')}
              onBlur={handleBlur('friendEmail')}
              value={values.friendEmail}
            />
          </Item>
        </View>
        <View >
          <Button 
          onPress={handleSubmit}
          >
            <Text >
              Add Friend{' '}
            </Text>
          </Button>
        </View>
      </View>
    )}
  </Formik>

您可以在其documentation here 中阅读更多有关 Formik 与 react-native 的用法

Answer 2

试试这个：

<Input
  placeholder="Email"
  onChange={e => setFieldValue('friendEmail', e.currentTarget.value)}
  onBlur={handleBlur}
  value={values.friendEmail}
  autoCapitalize="none"
/>

Answer 3

我认为您的代码库中有几个问题。

1. onChangeText={handleChange('friendEmail')}。它会在渲染组件时触发handleChange，而不是在您实际在输入框中输入时。
2. Formik 的 handleChange 函数采用 React.ChangeEvent 而不是值。检查here。而onChangeText 的react-native 提供输入的更改文本而不是事件。检查here

您可以在这种情况下使用setFieldValue 函数：

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmitForm}
    validationSchema={validationSchema}>
    {({
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      values,
      setFieldValue
    }) => {
    const setEmail = (email) => {
      setFieldValue('friendEmail', email)
    }
    return (
      <View>
        <View>
          <Item style={scaledAddFriendEmailStyles.searchField}>
            <TextInput
              placeholder="Email"
              onChangeText={setEmail}
              value={values.friendEmail}
            />
          </Item>
        </View>
      </View>
    )
    }}
  </Formik>

请注意：我从未将formik 与react-native 一起使用。只是想把这些点联系起来。

Answer 4

Formik 现在可以很好地与 React Native 配合使用，但需要注意的另一件事是表单控件中的 name 必须与 Formik 使用的架构中的属性名称匹配。

例如，如果使用以下 Yup 架构：

const schema = yup.object({
  personName: yup.string().required('Name required')
});

那么以下内容将不起作用，因为 Yup 架构 (personName) 和表单控件 (nameofPerson) 不匹配；用户将无法在该字段中输入：

<Form.Control
  name="nameOfPerson"
  value={values.personName}
  onChange={handleChange}
  onBlur={handleBlur}
  type="text"
  isValid={!errors.personName && !!touched.personName}
  isInvalid={!!errors.personName && !!touched.personName}
/>

要使其工作，name 应该与 Yup 属性相同；在这种情况下，personName:

<Form.Control
  name="personName"
  value={values.personName}
  onChange={handleChange}
  onBlur={handleBlur}
  type="text"
  isValid={!errors.personName && !!touched.personName}
  isInvalid={!!errors.personName && !!touched.personName}
/>

此示例使用 React-Bootstrap Form.Control，但应适用于任何创建表单控件的方式。