react-hook-form多步表单问题

Question

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

我使用来自react-hook-form的<FormProvider />组件将表单数据注入到页面中，并且我的input组件是使用来自useFormContext()钩子的register方法注册的

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