React+Bootstrap两步模态框实现：状态函数使用疑问

你已经通过formStage状态管理步骤进度，只需要通过条件渲染切换模态框内的表单内容，同时绑定对应按钮事件即可完成两步流程。以下是具体实现方案：

核心修改点 #

1. 给「下一步」「返回」按钮绑定已定义的nextStage/previousStage函数
2. 根据formStage的值（0对应第一步、1对应第二步），条件渲染表单主体和底部按钮组

修改后的完整代码 #

import { useState } from 'react';

function TwoStepModalForm() {
  const [formStage, setFormStage] = useState(0);

  function nextStage(e) {
    e.preventDefault();
    setFormStage(prev => prev + 1); // 函数式更新避免闭包异常
  }

  function previousStage(e) {
    e.preventDefault();
    setFormStage(prev => prev - 1);
  }

  // 表单提交逻辑，可按需扩展
  function handleSubmit(e) {
    e.preventDefault();
    // 这里可添加表单数据收集、接口请求等逻辑
    console.log('表单提交完成');
    // 手动关闭Bootstrap模态框
    const modal = document.getElementById('Profile');
    modal.classList.remove('show');
    document.body.classList.remove('modal-open');
    document.querySelector('.modal-backdrop')?.remove();
  }

  return (
    <>
      <div className="btn btn-primary" data-toggle="modal" data-target="#Profile">
        打开表单
      </div>

      <div className="modal fade" id="Profile" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">
                {formStage === 0 ? '填写基本信息' : '填写家庭信息'}
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form onSubmit={handleSubmit}>
              {/* 根据步骤切换表单内容 */}
              <div className="modal-body">
                {formStage === 0 ? (
                  <div className="input-group mt-2">
                    <label htmlFor="recipient-name" className="input-label">
                      姓名
                    </label>
                    <input
                      name="myName"
                      type="text"
                      className="input-element"
                    />
                  </div>
                ) : (
                  <div className="input-group mt-2">
                    <label htmlFor="recipient-name" className="input-label">
                      家庭住址
                    </label>
                    <input
                      name="myFamily"
                      type="text"
                      className="input-element"
                    />
                  </div>
                )}
              </div>

              {/* 根据步骤切换底部按钮 */}
              <div className="modal-footer justify-content-between">
                {formStage === 0 ? (
                  <>
                    <button
                      type="button"
                      className="btn btn-block btn-secondary"
                      data-dismiss="modal"
                      aria-label="Close"
                    >
                      关闭
                    </button>
                    <button
                      type="button"
                      className="btn btn-block btn-primary"
                      onClick={nextStage}
                    >
                      下一步
                    </button>
                  </>
                ) : (
                  <>
                    <button
                      type="button"
                      className="btn btn-block btn-secondary"
                      onClick={previousStage}
                    >
                      返回
                    </button>
                    <button
                      type="submit"
                      className="btn btn-block btn-primary"
                    >
                      提交
                    </button>
                  </>
                )}
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

export default TwoStepModalForm;

关键细节说明 #

• 函数式状态更新：使用setFormStage(prev => prev + 1)而非直接依赖formStage变量，避免组件闭包导致的状态更新错误
• 统一表单包裹：将所有步骤内容放在同一个<form>标签内，方便统一处理表单提交逻辑
• 模态框关闭处理：提交表单后手动移除Bootstrap模态框的相关类和遮罩层，确保模态框正常关闭

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