javascript - 附加到 React 输入组件的日期选择器

Question

如果没有原生 <input type="date">支持，我想用日期选择器小部件填充所有日期输入；例如，jQuery UI datepickers .

查看演示 here.在 Google Chrome 中，它呈现 native 日期输入，而在 Firefox (v32.0.3) 中，jQuery UI 小部件得到部署。这正是我遇到问题的地方。输入中的所有手动更改(键盘编辑)都很好地反射(reflect)在日期选择器小部件中。但是，反过来，如果我在小部件日历中选择一天，则新值不会被底层 React 组件获取。在演示中，您会注意到在 Chrome 中，在选择一个日期时，另一个日期会自动调整。对于 Firefox 中的日期选择器，该功能已被破坏。 React 不知道值会发生变化。

正在关注 this advice , 我已经添加了

componentDidMount: function(e) {
    this.getDOMNode().addEventListener(
        'change',
        function (e) { console.dir(e); }
    );
},

到我的DateInput组件类。但是，它永远不会在小部件选择时被调用。我怎样才能让它发挥作用？

上面链接的演示的完整非压缩源代码可用here.

Answer 1

解决方案是在 jQuery 上做所有事情，而不是直接在 DOM 上做:

var isPolyfilled = function () {
        return (window && window.$ && window.$.datepicker);
    };

module.exports = React.createClass({
    ...

    componentDidMount: function () {
        setTimeout(function () {
            if (isPolyfilled()) {
                window.$(this.getDOMNode()).datepicker();
                window.$(this.getDOMNode()).on('change', this.handleEdit);
            }
        }.bind(this), 500);
    },

    componentWillUnmount: function () {
        if (isPolyfilled()) {
            window.$(this.getDOMNode()).off();
        }
    }

    ...
};

完整源码为on GitHub.