Javascript 使用jQuery UI Timepicker插件和React_Javascript_Jquery_Jquery Plugins_Reactjs_Jquery Ui Timepicker

Javascript 使用jQuery UI Timepicker插件和React

javascript jquery jquery-plugins reactjs

Javascript 使用jQuery UI Timepicker插件和React,javascript,jquery,jquery-plugins,reactjs,jquery-ui-timepicker,Javascript,Jquery,Jquery Plugins,Reactjs,Jquery Ui Timepicker,我试图在我正在编写的React组件中使用。然而，每当我尝试使用它时，我都会得到一个错误，即插件添加到jQuery的“datetimepicker”函数没有定义我认为我所面临的部分（或者全部）问题是，React中没有用于此的模块，但我正在通过React导入jQuery。我想做的是 index.html: <!DOCTYPE html> <html lang='eng'> <head> <meta charset='utf-8'>

我试图在我正在编写的React组件中使用。然而，每当我尝试使用它时，我都会得到一个错误，即插件添加到jQuery的“datetimepicker”函数没有定义

我认为我所面临的部分（或者全部）问题是，React中没有用于此的模块，但我正在通过React导入jQuery。我想做的是

index.html:

<!DOCTYPE html>
<html lang='eng'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery UI core CSS -->
    <link rel="stylesheet" href="dist/jquery-ui.css">

    <!-- jQuery UI Timepicker Addon CSS -->
    <link rel="stylesheet" href="dist/jquery-ui-timepicker-addon.css">
</head>
  <body>
    <p style="color: white">
      If you see this there is a problem with React on the site.
    </p>
    <script src="dist/bundle.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery-ui-timepicker-addon.js"></script>
  </body>
</html>



如果您看到这一点，则站点上的React存在问题。

正如您所看到的，由于该插件目前不作为React组件存在（至少，如果它存在，我找不到它），所以我将其与jQuery UI一起手动导入

我的组件（通过其他组件包含在索引中）：

/**@jsx React.DOM*/
var React=要求（'React'）；
var jQ=require（'jquery'）；
var Time=React.createClass({
componentDidMount:function（）{
jQ（“#startDate”）.datetimepicker({
时间格式：“HH:mm:ss”，
onClose:function（）{
控制台日志（“计时器选择器关闭”）；
}
});
},
render:function（）{
返回(
);
}
});
module.exports={Time:Time}；

我应该如何将Timepicker插件包含在这个React组件中

旁注：我之所以使用Timepicker，很大程度上是因为它比其他元素弹出得好，还包括对秒和各种时间格式的支持。我现在正在使用“datetime local”输入，但它们并没有真正削减它：（

尝试在此处添加jQuery：

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="dist/bundle.min.js"></script>

并使用$而不是jQ

$('#startDate').datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });

我还认为可以使用这个.getDOMNode（）而不是“#startDate”

 $(this.getDOMNode()).datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });

如果我使用

require（“jquery”）

在代码的其他部分，我是否有效地向用户发送了两份jQuery？如果是，解决方案是始终使用手动加载的

版本，而不从npm中包含它？是的，您将获得两份jQuery。是的，手动添加它或检查jQuery ui的npm包，如。

$('#startDate').datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });

 $(this.getDOMNode()).datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });