React项目引入Bootstrap4日期选择器后选日期不触发onChange事件

你遇到的选择日期后onChange不触发的问题，核心是jQuery实现的Bootstrap日期选择器和React的事件体系存在兼容断层：

• React绑定在input上的onChange是合成事件，本质是React在根DOM节点上监听原生input、change事件，匹配到对应组件的回调后执行
• bootstrap-datepicker完成日期选择后，是通过jQuery的val()方法直接修改DOM的value属性，这个操作过程不会向浏览器派发原生的input/change事件，React自然捕获不到值变化，绑定的回调也就不会触发

另外当前组件代码存在小语法问题：使用了HTML原生的class属性，没有使用React要求的className，控制台会抛出属性警告。

界面效果参考：

这个方案完全保留你通过CDN引入的Bootstrap日期选择器的原生样式，不需要重新引入React生态的日期组件，避免了同类组件常见的样式异常、弹窗定位错位的问题。

1. 移除自动初始化逻辑 #

删除原本依赖的data-provide="datepicker"自动初始化机制：该逻辑在页面首次加载完成时就执行，此时React组件还未渲染到DOM上，自动初始化根本找不到对应节点，会导致交互、样式异常。

2. 组件生命周期内手动初始化 #

等React将DOM渲染完成后，再调用datepicker的初始化逻辑，同时手动绑定日期选择的事件回调，将值变化同步到React的事件体系中。

以函数组件为例的完整实现：

import { useEffect, useRef } from 'react'

function DatePickerField() {
  // 存储datepicker容器的DOM引用
  const dateContainerRef = useRef(null)
  // 存储原生input的DOM引用
  const inputRef = useRef(null)

  useEffect(() => {
    // 等待CDN引入的jQuery和datepicker脚本加载完成再初始化
    if (!window.jQuery?.fn?.datepicker) return

    // 初始化日期选择器
    window.jQuery(dateContainerRef.current).datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true
    })

    // 监听datepicker自带的日期选中事件，同步值变化
    window.jQuery(dateContainerRef.current).on('changeDate', (event) => {
      const selectedDate = event.format()
      // 手动派发原生input事件，让React的onChange能够识别到值变化
      const nativeInputEvent = new Event('input', { bubbles: true })
      inputRef.current.dispatchEvent(nativeInputEvent)
    })

    // 组件卸载时销毁datepicker实例，避免内存泄漏
    return () => {
      window.jQuery(dateContainerRef.current).datepicker('destroy')
    }
  }, [])

  return (
    <div ref={dateContainerRef} className="input-group date mb-3">
      <input
        ref={inputRef}
        type="text"
        className="form-control"
        onChange={(e) => console.log('React捕获到的选中值：', e.target.value)}
      />
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className="fa fa-calendar" />
        </span>
      </div>
    </div>
  )
}

• 初始化顺序问题：如果CDN脚本加载速度比React渲染慢，需要给引入的jQuery、datepicker脚本加defer属性，保证脚本在DOM解析完成后按顺序加载，避免出现datepicker is not a function的报错
• 不要混用DOM操作和React状态逻辑：所有通过datepicker产生的值变化，都要通过事件同步到React的组件状态里，不要直接用jQuery修改input的value，否则会破坏React的虚拟DOM比对逻辑，出现值显示和状态不一致的问题
• 必须在组件卸载时销毁datepicker实例：路由切换场景下，反复挂载组件会残留多个datepicker的事件监听，造成内存泄漏和弹窗重复触发的问题

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