js Tepki ve github örneklerden modal bootstrap

oy
1

Ben tepki sahip bir uygulama kurmaya çalışıyorum ve her şey benim modal haricinde iyi gidiyor. Ben bakir, aşağıdaki bağlantıdan gelen bu kodu kullandım ve hataları olsun. https://github.com/facebook/react/blob/master/examples/jquery-bootstrap/js/app.js

Bu keman deneyin http://jsbin.com/eGocaZa/1/edit?html,css,output

Geri arama işlevleri Bu erişmesini görünmüyor. Eğer giriş yaparsanız Bu konsolda, bu pencere nesnesini kaydeder.

openModal: function() {
  this.refs.modal.open();
},

Bunda geçmek ve çalışmak gibiydi ama bu doğru değil jsfiddle iyi davranmak görünmüyordu yeni bir işlev döndünüz. Ben yerel olarak ateş modal var ama sonra yakın fonksiyonu ile aynı sorunu çalıştırmak. Herhangi bir yardım mutluluk duyacağız. Teşekkürler!

var Example = React.createClass({
  handleCancel: function() {
    if (confirm('Are you sure you want to cancel?')) {
      this.refs.modal.close();
    }
  },

  render: function() {
    var modal = null;
    modal = (
      <BootstrapModal
        ref=modal
        confirm=OK
        cancel=Cancel
        onCancel={this.handleCancel}
        onConfirm={this.closeModal}
        title=Hello, Bootstrap!>
        This is a React component powered by jQuery and Bootstrap!
      </BootstrapModal>
    );
    return (
      <div className=example>
          {modal}
        <BootstrapButton onClick={this.openModal(this)}>Open modal</BootstrapButton>
      </div>
    );
  },

  openModal: function(obj) {
    return function(){obj.refs.modal.open();}
  },

  closeModal: function() {
    this.refs.modal.close();
  }
});
Oluştur 19/09/2013 saat 05:14
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
7

Ben senin koduyla birkaç sorun bulundu:

  1. JQuery'ye önce Bootstrap JS yüklüyormuş ama sonra yüklenmesi gerekiyor.
  2. Sen bileşen yöntemleri için farklı kapsam kuralları vardı ki, 0.3.0 Tepki kullanıyorlardı - yöntemler vardır, 0.4 Tepki beri otomatik bileşene bağlı . Sen yazmış olabilirdi openModal: React.autoBind(function() { this.refs.modal.open(); })ya onClick={this.openModal.bind(this)}lardaki 0,3 tepki, ama 0,4 yükseltme elle bağlamak için gerekliliğini ortadan kaldırır.
  3. Kişisel modal vardı hidegörünmez hale gibiydi sınıfı; Bunu kaldırıldı ve şimdi kalıcı görünmesi gibi görünüyor. Bu e-postanın kod ve örnek arasındaki farklı davranış niçin şu anda emin değilim.

: İşte benim çalışma örnek http://jsbin.com/eGocaZa/5/edit . Modal bazı garip CSS uygulanmış gibi görünüyor ama seni burada bırakacağım bu yüzden tepki ilişkili sanmıyorum. Bir konu açık olursa bana bildirin.

Cevap 19/09/2013 saat 05:58
kaynak kullanıcı

oy
2

Tabii ki bu bütün gece çalıştı ve burada bir soru sormak ama burada çözüm sonra sonra cevap anlamaya.

gerekli fonksiyonlar "Bu" erişmek için AutoBind sarılmış olması. İşte etkilenen fonksiyonlar vardır ...

    close: React.autoBind(function() {console.log(this);
    $(this.getDOMNode()).modal('hide');
}),
open: React.autoBind(function() {
    $(this.getDOMNode()).modal('show');
}),
...
handleCancel: React.autoBind(function() {
    if (this.props.onCancel) {
        this.props.onCancel();
    }
}),
handleConfirm:React.autoBind(function() {
    if (this.props.onConfirm) {
        this.props.onConfirm();
    }
})
...
openModal: React.autoBind(function() {
    this.refs.modal.open();
}),
closeModal: React.autoBind(function() {
        this.refs.modal.close();
})
Cevap 19/09/2013 saat 06:13
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more