我正在尝试让表单步骤易于导航。必须允许用户通过单击以前的表单步骤返回，如果目标步骤和中间的所有内容都已填写且有效，则前进。
我通过使用类似这样的方法使它工作起来，但这个方法的问题是validateFields（）只检查当前步骤的表单，所以我可以填写，比方说第一步，然后向前跳8步，因为validateFields（）只验证当前步骤，认为一切都很好。

form.validateFields()
      .then(() => {
        setCurrentStep(step);
      })
      .catch((err) => {
        console.log(err);
        return;
      });

所以我尝试让validateFields()接受一个包含需要检查的每个表单字段名的数组。但是，我找不到任何关于这种实现的文档，下面的文档总是导致解析。

const handleStepChange = (step) => {
    // let user go back to previous steps
    if (step <= currentStep) {
      setCurrentStep(step);
      return;
    }

    // let user go forward if everything is valid
    // if not, force user to use "next step" button
    form.validateFields(FORM_FIELDS) // FORM_FIELDS is an array that keeps field names
      .then(() => {
        setCurrentStep(step);
      })
      .catch((err) => {
        console.log(err);
        return;
      });
  };

这是我大致整理的方法：

const [form] = Form.useForm();
  const [currentStep, setCurrentStep] = useState(0);

 const initialSteps = {
    form,
    step: (val) => setCurrentStep(val),
    nextStep: () => setCurrentStep((prev) => prev + 1),
  };

const [steps] = useState([
    {
      title: 'Personal',
      content: <PersonalForm {...initialSteps} />,
    },
    {
      title: 'Details',
      content: <DetailsForm {...initialSteps} />,
    },
    {
      title: 'Contact',
      content: <ContactForm {...initialSteps} />,
    }])

return <Steps
          size="small"
          current={currentStep}
          direction="vertical"
          onChange={(current) => handleStepChange(current)}
        >
          {steps.map((item, index) => (
            <Step status={item.status} key={item.title} title={item.title} />
          ))}
        </Steps>

我如何验证确保验证每一个表单字段被卸载，未填写，未触及等？
编辑：我也尝试过分别访问每个步骤的表单对象，希望每个表单对象都包含自己的表单字段，但也没有成功

const handleStepChange = (step) => {
  // let user go back to previous steps
  if (step <= currentStep) {
    setCurrentStep(step);
    return;
  }

  // let user go forward if target step and steps in between are filled in
  const validationFields = [];
  const stepsInbetween = [];
  for (let i = 0; i < step - currentStep; i++) {
    const stepCursor = steps[currentStep + i];
    stepsInbetween.push(stepCursor);
    const stepCursorFields = STEP_FIELDS[stepCursor.content.type.name];
    validationFields.push(...stepCursorFields);
  }
  let isValid = true;
  stepsInbetween.forEach((s) => {
    s.content.props.form
      .validateFields()
      .then(() => {})
      .catch(() => (isValid = false));
  });
  if (isValid) setCurrentStep(step);
};