无法使用Formik表单单击按钮 [英] unable to click on button with Formik form

问题描述

我正在使用Formik进行验证，因此，如果输入为空，则会出现必需的错误".

I am using Formik for my validation such that if the input is empty, I will get a 'required error'.

当我单击表单的按钮时，应该呈现一个列表(UsersFoundList).此列表在表单外部，并且包含进一步具有按钮的元素.当我第一次单击列表中的那些按钮时，它们不起作用.相反，formik错误开始显示在输入字段上.

When I click on the button of my form, a list should be rendered (UsersFoundList). This list is outside the form and has elements which further have buttons. When I click on any of those buttons from the list for the first time, they dont work. Instead, the formik error starts showing up on the input field.

仅当我尝试再次提交表单时，才会出现此错误.当我单击其他任何东西时都不会.

This error should only show up when I am trying to submit the form again. Not when I click on anything else.

const [showFlatList, setShowFlatList] = useState(false);

    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
    console.log('hello', values.input)
    setShowFlatList(true);
    helpers.resetForm();
  };
  return (
    <View style={styles.container}>
      <View >
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmitForm}
            validationSchema={addRelationValidationSchema}>
            {({ handleChange, handleBlur, handleSubmit, values }) => (
              <View style={styles.searchFieldContainer}>
                <View style={styles.form}>
                  <FieldInput
                    handleChange={handleChange}
                    handleBlur={handleBlur}
                    value={values.input}
                    fieldType="input"
                    icon="user"
                    placeholderText="E-Mail oder Telefonnummer oder Name"
                  />
                  <ErrorMessage
                    name="input"
                    render={(msg) => <ErrorText errorMessage={msg} />}
                  />
                </View>
                <View style={styles.buttonContainer}>
                  <NewButton buttonText="Suchen" onPress={handleSubmit} />
                </View>
              </View>
            )}
          </Formik>
        </View>
                <View style={styles.listHolder}>
          {showFlatList && (
            <UsersFoundList/>
          )}
        </View>
    </View>
  );

复制的示例: https://snack. expo.io/@nhammad/jealous-beef-jerky

在Android手机中值得注意.不在网络版的codeandbox上.

Noticeable in Android phone. Not on the web version of codesandbox.

刚刚意识到不仅按钮，而且如果我单击屏幕上的任意位置，该错误也会再次出现.

Just realised that not just the button but if I click anywhere on the screen, the error shows up again.

推荐答案

在您的表单中，您需要将ref传递给您的FieldInput组件

In your form, you need to pass a ref to your FieldInput component

// get a ref for your field input
const fieldRef = useRef();


 const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
    // on successful submission blur the field
    fieldRef.current.blur();
    ...
 };

...


   <Form
     ...
     render={() => (
       {/* pass the ref to your fieldinput in your form */}      
       <FieldInput ref={ref} .../>
     )}

   />

然后在您的自定义FieldInput组件中，您需要像这样转发引用:

Then in your custom FieldInput component, you need to forward the ref like this:

import React, { forwardRef } from 'react';

export const FieldInput = forwardRef((props,ref) => {
  return (
    <Item rounded={rounded} style={[styles.inputItem, style]}>
      <Input
         ref={ref}
         ...
      />
    />
  )
});

这篇关于无法使用Formik表单单击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！