使用Formik和Formik-Stepper做多步表单时点击下一步如何滚动到页面顶部

实现思路 #

核心就是监听步骤切换的触发时机，在步骤更新后执行滚动到顶部的逻辑，以下提供两种常用实现方式：

方案1：监听步骤变化触发滚动（最通用） #

通过Formik Stepper提供的onStepChange钩子拿到当前激活的步骤索引，配合useEffect监听步骤变化触发滚动：

import { useState, useEffect } from 'react';
import { Formik, Form } from 'formik';
import { FormikStepper, FormikStep } from 'formik-stepper';

function MultiStepForm() {
  // 存储当前激活步骤索引
  const [currentStep, setCurrentStep] = useState(0);

  // 步骤变化时自动滚动到顶部
  useEffect(() => {
    // 平滑滚动到页面顶部，不需要平滑效果可直接写 window.scrollTo(0, 0)
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }, [currentStep]);

  return (
    <Formik
      initialValues={{ /* 你的表单初始配置 */ }}
      validationSchema={/* 你的表单校验规则 */}
      onSubmit={(values) => {
        // 表单最终提交逻辑
      }}
    >
      <Form>
        <FormikStepper
          // 步骤切换时更新当前步骤索引
          onStepChange={(stepIndex) => setCurrentStep(stepIndex)}
        >
          <FormikStep label="步骤1">
            {/* 步骤1表单内容 */}
          </FormikStep>
          <FormikStep label="步骤2">
            {/* 步骤2表单内容 */}
          </FormikStep>
          {/* 其余步骤依此类推 */}
        </FormikStepper>
      </Form>
    </Formik>
  );
}

注意：onStepChange为formik-stepper 2.x及以上版本支持的属性，低版本可通过自定义按钮的方式实现

方案2：自定义Next按钮点击事件触发滚动 #

如果你需要自定义步骤导航按钮，也可以直接在Next按钮的点击逻辑中加入滚动代码：

<FormikStepper
  components={{
    // 重写默认的下一步按钮
    NextButton: ({ onClick, ...buttonProps }) => (
      <button
        {...buttonProps}
        onClick={(e) => {
          // 执行默认的下一步跳转逻辑
          onClick(e);
          // 滚动到顶部
          window.scrollTo(0, 0);
        }}
      >
        下一步
      </button>
    )
  }}
>
  {/* 表单步骤内容 */}
</FormikStepper>

补充说明 #

• 如果需要滚动到表单容器顶部而非整个页面顶部，将window.scrollTo替换为对应容器的滚动方法即可，示例：

  document.querySelector('.form-wrapper').scrollTo(0, 0)
  

• 回退到上一步也需要滚动到顶部的话，两种方案都可以直接覆盖，无需额外写逻辑。

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