javascript - react-hook-form 多步表单问题

Question

我正在使用 react-hook-form 实现多步骤表单我的问题是，当我返回上一页时，输入字段没有用表单数据重新初始化。

我正在使用 <FormProvider />来自 react-hook-form 的组件将表单数据注入(inject)页面和我的 input组件已注册 register方法来自 useFormContext() Hook

const CreateAccount = () => {
  const [currentStep, setCurrentStep] = useState(0);

  const methods = useForm<FormData>({
    mode: "onChange",
  });
  const onSubmit = (data) => console.log(data);

  const handleNextStep = () => {
    if (currentStep >= 5) return;
    setCurrentStep(currentStep + 1);
  };
  const handlePreviousStep = () => {
    if (currentStep <= 0) return;
    setCurrentStep(currentStep - 1);
  };

  const renderContent = () => ({
    [RegistrationSteps.UsernameEmail]: <UsernameEmail handleNextStep={handleNextStep} handlePreviousStep={handlePreviousStep} />,
    [RegistrationSteps.Password]: <CreatePassword handleNextStep={handleNextStep} handlePreviousStep={handlePreviousStep} />,
  });

  return (
    <Container maxWidth="sm">
      <FormProvider {...methods}>
        <form onSubmit={methods.handleSubmit(onSubmit)}>
            {renderContent()[currentStep]}
        </form>
      </FormProvider>
    </Container>
  );
};

export default CreateAccount;

这是输入框的样子

 const {
    register
  } = useFormContext();


    <TextField
      label="Email"
       {...register("email")}
     />

即使表单仍保留其状态的数据，当我在表单页面之间来回切换时，它也不会填充到相应的字段中。

Answer 1

我建议在您的步骤中将每个组件创建为具有其自己的 useForm() 实例的表单，并在状态提供程序中包装步骤以跨存储数据，而不是在全局级别使用单一表单不同的步骤。这样，您可以在初始化时使用 useForm 的 defaultValues 选项从相应的状态为步骤表单分配值。

• 你可以查看this对于我要解释的基本架构。

• defaultValues in useForm