React Native中React Hook Form提交后输入时隐藏错误提示的实现

要实现「首次提交表单有错误则显示提示，用户再次输入时隐藏」的逻辑，你需要追踪表单的提交状态，并结合react-hook-form的监听能力来控制错误提示的显示。

修改后的代码： #

import { useState } from 'react';
import { useForm } from 'react-hook-form';

export default function Register({navigation}: any) {
  // 新增状态标记表单是否已提交
  const [isSubmitted, setIsSubmitted] = useState(false);
  const {
    control,
    handleSubmit,
    formState: {errors, isDirty, isValid},
    watch,
  } = useForm({defaultValues: {email: ''}});

  // 监听email输入，用户开始输入时重置提交状态
  const currentEmail = watch('email');
  if (currentEmail && isSubmitted) {
    setIsSubmitted(false);
  }

  const onSubmit = (data: object) => {
    // 提交时标记为已提交状态
    setIsSubmitted(true);
    console.log(data);
    // navigation.navigate('NameAndPass');
  };

  return (
    <Container>
      <UserImage
        source={{
          uri: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.shareicon.net%2Fdata%2F2015%2F09%2F09%2F98455_man_512x512.png&f=1&nofb=1',
        }}
      />
      <InputContainer>
        <InputAuth
          placeholder="Email"
          style={{
            marginTop: 40,
            marginBottom: 0,
          }}
          control={control}
          name="email"
          rules={{
            required: true,
            pattern: {
              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
              message: 'El email debe ser válido',
            },
          }}
        />
        {/* 仅当表单已提交且存在错误时显示提示 */}
        {isSubmitted && errors.email && (
          <ErrorMessage>{errors.email.message}</ErrorMessage>
        )}
        <ErrorMessage>{JSON.stringify(isValid)}</ErrorMessage>
      </InputContainer>
      <Button
        onPress={handleSubmit(onSubmit)}
        disabled={!isDirty}
        isDirty={isDirty}>
        <ButtonText>Next</ButtonText>
      </Button>
      <BottomAuth
        navigation={navigation}
        navigateTo="Login"
        text="Already have an account?"
        touchableText="Log in."
      />
    </Container>
  );
}

关键逻辑说明： #

• isSubmitted状态：用来记录用户是否提交过表单，首次提交时设为true，触发错误提示显示
• watch监听输入：实时监控email字段的变化，一旦用户开始输入且表单已提交过，就把isSubmitted重置为false，隐藏错误提示
• 错误提示条件：修改显示逻辑，只有当表单已提交且存在对应错误时，才渲染错误提示组件

如果你的InputAuth自定义组件没有正确绑定react-hook-form的状态更新事件，需要确保它内部通过Controller组件或者调用setValue方法来同步输入值，否则watch无法监听到输入变化。

内容的提问来源于stack exchange，提问作者Alvaro