onChange 事件不会在日期选择时触发

编程问答 2022-05-21

问题描述

我在我的 react js 中使用了 bootstrap 4。我只是像这样链接 index.html 中的引导程序日期选择器

<!doctype html>
<html className="no-js" lang="zxx">

<head>
  <Meta charset="utf-8">
  <Meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <Meta name="description" content="">
  <Meta name="viewport" content="width=device-width,initial-scale=1">

  <link rel="shortcut icon" type="image/x-icon" href="/assets/img/favicon.png">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>

<body>
  <div id="root"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>

</html>

并像这样显示在我的反应组件中

<div class="input-group date mb-3" data-provide="datepicker">
  <input type="text" class="form-control" onChange={e => console.log(e)} />
  <div class="input-group-prepend">
    <span class="input-group-text"><i className="fa fa-calendar"></i></span>
  </div>
</div>

enter image description here

从日历中选择日期时，它不会触发 onChange 事件。我没有使用 react datepicker 插件，因为它们的日历显示有问题。这就是我继续从引导日期选择器链接使用的原因。

解决方法

从 div 中删除 data-provide="datepicker" 并将其添加到您的输入元素中

bootstrap-4bootstrap-datepickeronchangereactjsreactjs