2017-11-24 1 views
0

Ich habe eine einfache Sidebar mit Dropdown-Menüs. Ich möchte, dass die Dropdown-Menüs beim Klicken aktiviert werden. Ich habe hierfür eine Datenzieleigenschaft verwendet. Aber es funktioniert nicht wie erwartet.Data-Target funktioniert nicht - React-Bootstrap

<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> 

Wie erreiche ich dies in Reaktion js ??

+0

Verwenden Sie die React-Bootstrap-Bibliothek oder verwenden Sie eine einfache Bootstrap-Bibliothek in Ihrem React-Code? –

+0

einfache Bootstrap-Bibliothek @MarioNikolaus –

+1

Was ist der Fehler, den Sie bekommen? Btw Ihr span-Tag ist nicht geschlossen, auch in Bootstrap-Dokumenten gibt es die Erwähnung, dass Sie tun sollten 'Wickeln Sie den Dropdown-Trigger und das Dropdown-Menü innerhalb .dropdown' –

Antwort

1

Datenattribute sollten normal funktionieren. Sie haben einen Fehler in der Syntax, da Sie das Attribut class für alle Elemente mit Ausnahme des ersten Bereichs anstelle von className verwenden.

+0

ich habe es geändert. funktioniert immer noch nicht –

1

Wenn Sie react-bootstrap verwenden, wie Sie im Titel erwähnt und auch das Tag hinzugefügt haben, dann ist dies die Art, wie Sie das Drop-Down erreichen können.

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

show ich importiere alles dafür? –

+0

Lesen Sie dies: https://react-bootstrap.github.io/getting-started.html –