在 React 中使用 jQuery UI Timepicker 插件

Question

我正在尝试在我正在编写的 React 组件中使用 jQuery UI Timepicker Addon。但是，每当我尝试使用它时，我都会收到一个错误，即插件添加到 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>

如您所见，由于 Addon 目前不作为 React 组件存在（至少，如果有我找不到它），我手动将其与 jQuery [=39] 一起导入=].

我的组件（通过不同的组件包含在索引中）：

/** @jsx React.DOM */
var React = require('react');
var jQ    = require('jquery');

var Time = React.createClass({
    componentDidMount: function() {
        jQ('#startDate').datetimepicker({
            timeFormat: "HH:mm:ss",
            onClose: function() {
                console.log("Timepicker closed");
            }
        });
    },
    render: function() {
        return (
            <input id="startDate" className="input-xs datetime modern" type="datetime-local" />
        );
    }
});

module.exports = {Time: Time};

我应该如何着手将 Timepicker Addon 包含在此 React 组件中？

旁注：我之所以使用 Timepicker，很大程度上是因为它在其他元素上的弹出效果很好，而且它包含对秒数和各种时间格式的支持。我现在正在使用 "datetime-local" 输入，但它们并没有真正削减它:(

Answer 1

尝试在此处添加 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>

移除

var jQ    = require('jquery');

并使用 $ 而不是 jQ

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

我还认为您可以使用 this.getDOMNode() 而不是“#startDate”

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

在 React 中使用 jQuery UI Timepicker 插件

Using the jQuery UI Timepicker Addon with React

javascript

jquery

jquery-plugins

reactjs

jquery-ui-timepicker