带有reactjs和引导程序的下拉菜单

Dropdown menu with reactjs and bootstrap

本文关键字：下拉菜单 引导程序 reactjs 带有      更新时间：2024-02-22

我很难弄清楚如何让这个下拉列表真正起作用。该按钮渲染良好，但不会下降。你知道我在这里遗漏了什么吗？我很确定我需要一个onClick函数，但不确定要控制什么才能将其下拉。

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

根据我的推断，您没有带有类下拉列表的除法。对代码做一点小小的更改应该可以。

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'))
          )
        )
      )
    );
}
});
相关文章：