React多步骤表单返回按钮失效问题排查求助

你的返回按钮在第三页失效的核心原因是：返回按钮未指定type="button"，在<form>标签内默认属于submit类型。点击时会先触发back函数，紧接着触发表单的onSubmit事件——由于React的setState是异步操作，onSubmit执行时step仍处于最后一页的状态，虽然不会调用next()，但表单提交的事件流程会干扰状态更新，最终导致返回功能失效。

修复步骤 #

1. 给返回按钮添加type="button"
   将返回按钮的代码修改为：

<button className="form-btn btn" onClick={back} type="button">
  <FaAngleLeft />
</button>

添加后按钮只会执行back函数，不会触发表单提交。

2. 补充类型导入（规范优化）
   你的onSubmit函数用到了FormEvent但未导入，需要在React的导入语句中补充：

import React, { useState, FormEvent } from "react";

验证效果 #

修改完成后，第三页的返回按钮会正常触发back函数，将step从2切换为1，回到第二页。

内容的提问来源于stack exchange，提问作者Jean Mako