TextInput 上的 onChange 在 Formik 中不起作用

IT技术 reactjs react-native formik native-base yup
2021-04-11 15:32:53

<TextInput>即使您只是指定占位符,通常也允许您输入。但是,在 Formik 表单中使用时,我无法在表单中键入和验证任何内容。我究竟做错了什么?

我曾尝试onChangeTextsetFieldValuehandleChange两者。

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

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

  const validationSchema = emailValidationSchema;

  const getFriendId = React.useCallback(
    (data: any) => {
      //console.log('Email', initialValues.friendEmail);
      if (data) {
        if (data.users.nodes.length == 0) {
         ...
        } else {
          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>
          <View>
            <View>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({
                  handleChange,
                  setFieldValue,
                  setFieldTouched,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                  values,
                }) => {
                  const setEmail = (friendEmail: string) => {
                    setFieldValue('friendEmail', friendEmail)
                    setFieldTouched('friendEmail', true, false);
                  }
                return(
                  <Form>
                  <View>
                    <View>                  
                      <Item>
                      <TextInput
                      placeholder="Email"
                      onChangeText={setEmail}
                      //onChangeText={handleChange}
                      //onChangeText={handleChange('friendEmail')}
                      //onChangeText={e => console.log('Workinggg')}
                      //onBlur={handleBlur('friendEmail')}
                      //value={values.friendEmail}
                      autoCapitalize="none"
                      />                      
                      </Item>
                    </View>
                    <View>
                      <Button
                        onPress={handleSubmit}>
                        <Text>
                          Add{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                  </Form>
                )}}
              </Formik>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

如何修复 textInput 以使打字和验证工作?

根据这个:https : //jaredpalmer.com/formik/docs/guides/react-native

我们不需要使用 name 属性。我也用过这个 onChangeText 但我仍然不能写任何东西。

1个回答

在您的情况下,如果您的TextInput第一个参数返回值就像您使用的那样。但是你错误地给name了字段:

<TextInput
  name="friendEmail"
  placeholder="Email"
  onChangeText={setEmail}
  autoCapitalize="none"
/> 

Formik如果您不为字段指定名称,则不知道在哪里设置您的值。你也可以这样做:

<TextInput
  name="friendEmail"
  placeholder="Email"
  onChangeText={(val) => {
    setFieldValue('friendEmail', val)
    setFieldTouched('friendEmail', true, false);
  }
  autoCapitalize="none"
/> 

我的建议是修改或编写TextInput. 字段应该返回onChange第一个参数name,第二个value它会更有用。您可以在官方文档上阅读有关您的问题的更多信息

@a125 奇怪。formik了解字段name
2021-05-23 15:32:53
TextInput 或 Input 上不存在属性名称。它总是给No overload matches this call.
2021-05-25 15:32:53