StepsForm 在使用form实例后，下一步如果有必填项，无法跳转到下一步，但又需要form实例，实现监听效果，如何实现呢

[lcylamb]

https://codesandbox.io/p/sandbox/fen-bu-biao-dan-forked-czf7kq

[dosubot[bot]]

你遇到的问题是 StepsForm 结合 form 实例（如 Form.useForm()）时，如果下一步有必填项，点击“下一步”无法跳转。这是已知的 StepsForm bug，多个 issue 已确认：只要传递了 form 实例，且后续 Step 有 required 字段，就会阻断跳转，onCurrentChange 也不会触发，且没有报错提示（参考1）。

推荐做法：

• 不要直接把 Form.useForm() 创建的 form 实例传递给 StepsForm 或 StepForm。
• 如果你需要监听表单变化，建议用 StepsForm 的 formRef 或 formMapRef（官方推荐），这样可以拿到当前或所有 step 的 form 实例，配合 onValuesChange 监听字段变化，不会影响内置的校验和跳转逻辑（官方文档）。
• 监听表单变化可以用 StepsForm 的 onFormChange 或 StepForm 的 onValuesChange，这两种方式都不会影响步骤跳转。

示例代码：

import { StepsForm, ProFormText } from '@ant-design/pro-components';
import { useRef } from 'react';

const formRef = useRef();

<StepsForm
  formRef={formRef}
  onFormChange={(name, values) => {
    // 这里可以监听所有 step 的变化
    console.log(name, values);
  }}
>
  <StepsForm.StepForm
    name="step1"
    onValuesChange={(changed, all) => {
      // 只监听当前 step 的变化
      console.log(changed, all);
    }}
    onFinish={async () => true}
  >
    <ProFormText name="a" label="A" rules={[{ required: true }]} />
  </StepsForm.StepForm>
  <StepsForm.StepForm
    name="step2"
    onFinish={async () => true}
  >
    <ProFormText name="b" label="B" rules={[{ required: true }]} />
  </StepsForm.StepForm>
</StepsForm>

这样你既能监听表单变化，也不会影响 StepsForm 的校验和跳转。

如果你一定要用 form 实例，建议只用 formRef，不要用 Form.useForm() 生成的实例直接传递。这个 bug 目前官方还未修复（参考2）。

更多细节可参考官方文档和相关 issue。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lcylamb]

想用Form.useWatch方法来监听，并且没有form实例使用 formRef?.current?.setFieldsValue有些步骤的值没有成功set，不知道为何

[dosubot[bot]]

Form.useWatch 必须传入 form 实例，或者组件包裹在 Form.Item 里自动获取最近的 form 实例。StepsForm 内部每个 Step 都有独立的 form 实例，formRef?.current 只指向当前 step 的 form。如果你用 formRef?.current?.setFieldsValue，只会影响当前 step，其他 step 的值不会被设置成功（因为 formRef.current 不是它们的实例）参考。

如果你想监听所有 step 的表单变化，建议用 StepsForm 的 formMapRef（拿到所有 step 的 form 实例），或者在每个 StepForm 里用 onValuesChange。Form.useWatch 监听时，必须传入对应 step 的 form 实例，否则无法监听到目标字段参考。

setFieldsValue 只会修改 form store，不会触发 onValuesChange/onFieldsChange（这是设计如此，防止循环调用）参考。如果你需要监听 setFieldsValue 的变化，用 Form.useWatch 监听目标字段（前提是传入正确的 form 实例），或者 setFieldsValue 后手动触发你的回调。

总结：StepsForm 多步表单每步有独立 form 实例，formRef 只指向当前 step，setFieldsValue 只影响当前 step。要批量设置/监听所有 step，需用 formMapRef 或分别传递每步的 form 实例给 useWatch。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}