数据目标无法正常工作 - React-bootstrap

时间:2017-11-24 07:14:28

标签: reactjs react-bootstrap

我有一个带下拉菜单的简单侧边栏。我想在点击时切换下拉菜单。我为此使用了data-target属性。但它没有按预期工作。

<div className="dropdown"> 
    <span className="dropdown-toggle" data-toggle="collapse" data-target="#target">Toggle Dropdown</span>
    <ul id="target" className="collapse">
        <li><a href="#"><i className="fa fa-bar-chart"></i><span className="menuName">Options</span></a></li>
    </ul>
</div>

我如何在反应中实现这一点?

2 个答案:

答案 0 :(得分:1)

数据属性应该正常工作。您的语法中有错误,因为您在除第一个范围之外的所有元素上使用class属性,而不是className

答案 1 :(得分:1)

如果您正在使用标题中提到的 react-bootstrap 并添加了标记,那么这就是您实现下拉菜单的方式。

<DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
   <MenuItem eventKey="1">Dropdown link</MenuItem>
   <MenuItem eventKey="2">Dropdown link</MenuItem>
</DropdownButton>