如何在ReactJS日历中实现点击日期弹出Bootstrap模态框？

步骤1：安装必要依赖 #

如果项目还没安装react-bootstrap和bootstrap，先执行以下命令：

npm install react-bootstrap bootstrap

步骤2：导入Bootstrap样式与组件 #

在组件文件顶部添加导入语句：

import 'bootstrap/dist/css/bootstrap.min.css';
import { Modal, Button } from 'react-bootstrap';

步骤3：添加模态框状态控制 #

在组件内部新增控制模态框显示/隐藏的状态：

const [showModal, setShowModal] = useState(false);

步骤4：修改日期选择逻辑，触发模态框 #

更新changeDate函数，选中日期后直接打开模态框：

const changeDate = (e) => {
  setDateState(e);
  setShowModal(true); // 选中日期后弹出模态框
};

步骤5：编写模态框JSX结构 #

在组件的return部分添加模态框代码，放在日历组件附近即可：

<Modal show={showModal} onHide={() => setShowModal(false)}>
  <Modal.Header closeButton>
    <Modal.Title>日期选择详情</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    你选中的日期是：<b>{moment(dateState).format('YYYY年MM月DD日')}</b>
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={() => setShowModal(false)}>
      取消
    </Button>
    <Button variant="primary" onClick={() => setShowModal(false)}>
      保存
    </Button>
  </Modal.Footer>
</Modal>

完整代码示例 #

import React, { useState } from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';
import moment from 'moment'
// 导入Bootstrap样式和组件
import 'bootstrap/dist/css/bootstrap.min.css';
import { Modal, Button } from 'react-bootstrap';

export default function AddMember() {
    const [dateState, setDateState] = useState(new Date())
    const [showModal, setShowModal] = useState(false);

    const changeDate = (e) => {
        setDateState(e);
        setShowModal(true); // 选中日期后打开模态框
    }

    // 封装关闭模态框的函数，让代码更整洁
    const closeModal = () => setShowModal(false);

    return (
        <>
            <div className='container mt-5'>
                <div className='row'>
                    <div className='col-sm-8 col-md-8 col-lg-8'>
                        <Calendar 
                            value={dateState}
                            onChange={changeDate}
                        />
                        <p>当前选中日期：<b>{moment(dateState).format('MMMM Do YYYY')}</b> </p>
                    </div>
                </div>
            </div>

            {/* Bootstrap模态框 */}
            <Modal show={showModal} onHide={closeModal}>
                <Modal.Header closeButton>
                    <Modal.Title>已选择日期</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    你点击的日期是：<b>{moment(dateState).format('YYYY年MM月DD日')}</b>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={closeModal}>
                        取消
                    </Button>
                    <Button variant="primary" onClick={closeModal}>
                        保存
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}

关键说明 #

• 模态框的显示状态由showModal控制，点击日历日期时通过setShowModal(true)触发弹出
• 关闭模态框可以通过右上角按钮、点击模态框外部或自定义按钮，统一调用setShowModal(false)即可
• 你可以根据需求修改模态框内容，比如添加表单、编辑日期相关业务逻辑等
• 务必确保Bootstrap样式正确导入，否则模态框可能出现样式异常

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