无法使用 Formik 表单单击按钮

Question

我正在使用 Formik 进行验证，如果输入为空，我将收到“必需的错误”。

当我单击表单的按钮时，应呈现一个列表 (UsersFoundList)。此列表位于表单之外，其中包含进一步具有按钮的元素。当我第一次单击列表中的任何这些按钮时，它们不起作用。相反，formik 错误开始出现在输入字段中。

只有在我尝试再次提交表单时才会出现此错误。当我点击其他任何东西时不会。

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 手机中很明显。网页版的代码沙盒上没有。

编辑：刚刚意识到不仅是按钮，而且如果我单击屏幕上的任何位置，错误就会再次出现。

Answer 1

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

// 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 组件中，您需要像这样转发引用：

import React, { forwardRef } from 'react';

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