TextInput上的onChange在Formik中不起作用 [英] onChange on TextInput Not Working Inside Formik

问题描述

通常<TextInput>允许您即使仅指定占位符也可以键入.但是，在Formik表单中使用时，我无法在表单中键入和验证任何内容.我在做什么错了?

Generally <TextInput> allows you to type even when you're just specifying a placeholder. However, when using within the Formik form, I am unable to type and validate anything in my form. What am I doing wrong?

我尝试同时使用setFieldValue和handleChange的onChangeText.

I have tried onChangeTextwith setFieldValueand handleChangeboth.

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以便进行键入和验证?

How can I fix the textInput to make the typing and validation work?

据此: https://jaredpalmer.com/formik/docs/guides/react-native

我们不需要使用name属性.我也使用过此onChangeText，但仍然无法编写任何内容.

We don't need to use the name property. I have used this onChangeText too but I still can't write anything.

推荐答案

在您的情况下，如果TextInput返回第一个参数的值，就像您使用所有权利一样.但是您错误地将name赋予字段:

In your case if your TextInput returns value at first parameter like you use all right. But you mistake give name to field:

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

如果不给字段命名，

Formik不知道在哪里设置值. 而且您也可以这样做:

Formik doesn't know where to set your value if you don't give name to field. And also you can do like:

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

我的建议是修改或编写TextInput的包装.并且字段应返回onChange第一个参数name和第二个value.它将更加有用. 您可以在官方文档上了解有关您的问题的更多信息.

My advice is to modify or write wrapper for TextInput. And field should return onChange first parameter name, and second value. It will be more useful. And you can read more about your problem on official docs.

这篇关于TextInput上的onChange在Formik中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！