React 中的 jQuery UI Datepicker 抛出 Uncaught TypeError答案

【问题标题】：jQuery UI Datepicker in React throws Uncaught TypeErrorReact 中的 jQuery UI Datepicker 抛出 Uncaught TypeError
【发布时间】：2023-03-04 20:12:01
【问题描述】：

当尝试让 jQuery UI Datepicker 在 JSFiddle 中与 React.js 一起工作时，当您单击输入框时，控制台中会抛出以下错误：

未捕获的类型错误：newDate.setHours 不是函数

JSFiddle 链接：http://jsfiddle.net/bengrunfeld/9ay9qdmd/

var Date = React.createClass({
    render: function() {
        return <input type="text" className="datepicker" />;
    }
});

var Calendar = React.createClass({
    componentDidMount: function() {
        $('.datepicker').datepicker();
    },
    render: function() {
        return ( 
            <form>
                <Date />
            </form>
        )
    }
});

React.render(<Calendar />, document.body);

【问题讨论】：

标签： jquery jquery-ui datepicker reactjs

【解决方案1】：

您重新定义了一个核心 JavaScript 对象：Date。如果将其重命名为其他名称，例如 DateInput，则为 works。

var DateInput = React.createClass({
    render: function() {
        return <input type="text" className="datepicker" />;
    }
});

【讨论】：

谢谢，成功了。愚蠢的错误。在我的主项目中，当我将$('.datepicker').datepicker(); 放入componentDidMount 时，它根本没有激活。有什么想法吗？
我不确定你的意思？但理想情况下，您应该在要从该组件的componentDidMount 中激活的特定元素上使用ref 和findDomNode。如果这个 jQuery UI 组件操作 DOM，你最终会遇到问题。
谢谢。通过将$('.datepicker').datepicker() 应用于input 的onFocus 事件来解决它。发挥了魅力。也会尝试你的方法。
（我不太确定你解决了什么问题，因为我在答案中包含的 jsfiddle 有效）。
是的，您的解决方案在 JSFiddle 中有效。 JSFiddle 是我使用它的一个非常基本的示例。在我的真实代码库中，初始渲染时不存在目标输入元素。用户必须单击某些内容才能显示输入框。所以事件在渲染时不能绑定到元素上，必须在后面绑定。因此，在元素存在时使用onFocus触发绑定。