React.js页面加载时如何用useEffect显示Bootstrap5模态框并展示用户名

前置准备 #

确保项目中已引入Bootstrap 5的CSS和JS依赖，可通过npm安装后导入：

npm install bootstrap

在项目入口文件（如main.jsx/index.js）中引入依赖：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

完整组件实现代码 #

import { useState, useEffect, useRef } from 'react'

export default function HomePage() {
  // 模态框DOM引用
  const modalRef = useRef(null)
  // 模态框输入的用户名
  const [username, setUsername] = useState('')
  // 提交后展示在页面的用户名
  const [submittedUsername, setSubmittedUsername] = useState('')

  // 页面加载完成自动弹出模态框
  useEffect(() => {
    const bsModal = new window.bootstrap.Modal(modalRef.current)
    bsModal.show()
    // 组件卸载时销毁模态框实例，避免内存泄漏
    return () => bsModal.dispose()
  }, [])

  // 提交用户名逻辑
  const handleSubmit = () => {
    if (!username.trim()) {
      alert('请输入用户名')
      return
    }
    setSubmittedUsername(username.trim())
    // 关闭模态框
    const bsModal = window.bootstrap.Modal.getInstance(modalRef.current)
    bsModal.hide()
  }

  return (
    <div className="container mt-5">
      {/* 页面展示用户名区域 */}
      {submittedUsername && (
        <div className="alert alert-success">
          欢迎您，*<b>{submittedUsername}</b>*
        </div>
      )}

      {/* Bootstrap 5 模态框 */}
      <div className="modal fade" ref={modalRef} tabIndex="-1">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">请输入用户名</h5>
            </div>
            <div className="modal-body">
              <input 
                type="text" 
                className="form-control" 
                placeholder="输入你的用户名"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-primary" onClick={handleSubmit}>
                提交
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

核心逻辑说明 #

• 依赖为空数组的useEffect仅会在组件首次挂载完成后执行，保证模态框只在页面加载时弹出一次
• 通过useRef获取模态框DOM实例，调用Bootstrap原生的show()/hide()方法控制显隐，避免和React状态冲突
• 输入的用户名先存储在临时状态中，提交后赋值给展示用的状态变量，同步渲染到页面指定区域

注意事项 #

不要直接通过修改CSS的display属性控制Bootstrap模态框显隐，否则会出现动画异常、背景遮罩不消失等问题，必须调用Bootstrap自带的实例方法操作。

内容的提问来源于stack exchange，提问作者M.obaid rajput