WedX - журнал о программировании и компьютерных науках

Средство выбора даты, прикрепленное к компоненту ввода React

В случае отсутствия встроенной поддержки <input type="date"> я хотел бы заполнить все входные данные дат с помощью виджетов datepicker; например, датчики пользовательского интерфейса jQuery.

См. демонстрацию здесь. В Google Chrome он отображает собственные вводы даты, а в Firefox (v32.0.3) развертываются виджеты пользовательского интерфейса jQuery. Вот именно с этим у меня проблема. Все ручные изменения ввода (редактирование клавиатуры) прекрасно отражаются в виджете выбора даты. Однако, наоборот, если я выберу день в календаре виджета, новое значение не будет получено базовым компонентом React. В демонстрации вы заметите, что в Chrome при выборе даты другая дата настраивается автоматически. Эта функциональность не работает для средств выбора даты в Firefox. React понятия не имеет, что значения меняются.

Следуя этому совету, я добавил

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

в мой класс компонентов DateInput. Однако он никогда не вызывается при выборе виджета. Как я могу заставить его работать?

Полный несжатый исходный код демонстрационной версии, указанной выше, доступен здесь.


Ответы:


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();
        }
    }

    ...
};

Полный исходный код находится на GitHub.

01.10.2014
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]