React giriş bileşenine iliştirilen bir Veri Tabanı

Question

Yerel <input type="date"> desteğinin bulunmaması durumunda, tarihçerlik widget'ları ile tüm tarih girişlerini çok doldurmak istiyorum; örneğin, jQuery UI datepickers.

Demoya bakın here. Google Chrome'da, Firefox'ta (v32.0.3) jQuery UI widget'ları dağıtılırken yerel tarih girişleri oluşturur. Tam olarak sorunum olduğu yer burası. Girişteki tüm manuel değişiklikler (klavye düzenlemeleri), datepicker widget'ına yansıtılır. Ancak, diğer yol, widget takviminde bir gün seçtiğimde, yeni değer temel React bileşeni tarafından alınmaz. Demoda, Chrome'da, bir tarih seçiminde, diğer tarihin otomatik olarak ayarlanacağını fark edersiniz. Bu işlev Firefox'taki tarih takipçileri için bozuldu. React, değerlerin değiştiği hakkında hiçbir fikre sahip değildir.

this advice, şu benim DateInput bileşen sınıfına

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

ekledik. Bununla birlikte, hiçbir zaman widget seçimlerini çağırmaz. Nasıl çalıştırabilirim?

yukarıda bağlantılı demo tam olmayan sıkıştırılmış kaynak kodu kullanılabilir here.

Answer 1

çözüm jQuery üzerinde her şeyi yapıyor ve doğrudan değil DOM üzerinde olduğu:

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

    ... 
}; 

tam kaynak kodu on GitHub.