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

问题描述

通常 允许您输入，即使您只是指定一个占位符.但是，在 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?

我已经尝试了 onChangeText 和 setFieldValue 和 handleChange 两者.

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.它会更有用.您可以在官方 docs 上阅读有关您的问题的更多信息.

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屋！