2016-04-07 24 views
2

Bu açılır kapanmanın nasıl çalışacağını anlamakta zorlanıyorum. Düğme iyi sonuç verir, ancak düşürmez. Burada eksik olduğum hakkında bir fikrin var mı? Bir onClick fonksiyonuna ihtiyaç duyduğumdan emin olun, ancak açılır listeye almak için neyin kontrol edileceğinden emin değilim. Ben sınıf açılan ile bir bölünme yok çıkarabiliriz kadarıylaTepki ve önyüklemeli açılır menü

var Dropdownbutton = React.createClass({ 
displayName: 'Dropdownbutton', 
render: function() { 
    return el.div(null, 
     el.div({className: 'col-xs-12 col-md-6 col-lg-3'}, 
     el.div({className:'btn-group'}, 
      el.a({href:'#',className:'btn btn-primary'},'Primary'), 
      el.a({href:'#',className:'btn btn-primary dropdown-toggle', "data-toggle":'dropdown'},el.span({className:'caret'},'')), 
      el.ul({className:'dropdown-menu'}, 
      el.li(null,el.a({href:'#'},'Action')), 
      el.li(null,el.a({href:'#'},'Another action')), 
      el.li(null,el.a({href:'#'},'Something else here')), 
      el.li({className:'divider'},''), 
      el.li(null,el.a({href:'#'},'Separated link')) 
     ) 
     ) 
    ) 
    ); 
} 

}); 
+1

[Tepki-önyükleme] 'yi (https://react-bootstrap.github.io/) son derece yararlı bulabilirsiniz. – mjohnsonengr

+0

Kayıp-bootstrap üzerinden gittim, eksik olduğumdan emin değilim. Normal düğmeler benim için sorun değil, ancak düşüşler sadece çalışmak istemiyor. –

+0

Bir onClick işleyicisine ihtiyacınız var. Özellikle [bu dosya] (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.js) özellikle tepki-önyükleme programının yaklaşımını gösterir. Temel olarak, onClick işleyicisinin, açılır sınıfı ("btn grubu" sınıfına sahip olanı) içeren açık sınıfa eklemesi gerektiğine inanıyorum. Üzgünüm size tam bir örnek veremem. En iyi ihtimalle size tepki-bootstrap ile nasıl yapılacağını gösterebilirim. – mjohnsonengr

cevap

0

. Kodunuzda küçük bir değişiklik yapmak işe yaramalıdır.

var Dropdownbutton = React.createClass({ 
displayName: 'Dropdownbutton', 
render: function() { 
    return el.div(null, 
     el.div({className: 'dropdown col-xs-12 col-md-6 col-lg-3'}, 
     el.div({className:'btn-group'}, 
      el.a({href:'#',className:'btn btn-primary'},'Primary'), 
      el.a({href:'#',className:'btn btn-primary dropdown-toggle', "data-toggle":'dropdown'},el.span({className:'caret'},'')), 
      el.ul({className:'dropdown-menu'}, 
      el.li(null,el.a({href:'#'},'Action')), 
      el.li(null,el.a({href:'#'},'Another action')), 
      el.li(null,el.a({href:'#'},'Something else here')), 
      el.li({className:'divider'},''), 
      el.li(null,el.a({href:'#'},'Separated link')) 
     ) 
     ) 
    ) 
    ); 
} 

}); 
İlgili konular