2016-08-08 13 views
2

Ich habe ein Formular erstellt, in dem ein Benutzer Optionen auswählen kann, bevor er das Formular abschickt. Ich verstecke die Checkboxen mit display: none und style die <label> so, dass, wenn der Benutzer auf die Beschriftung klickt, es das Kontrollkästchen auslöst.Klick Label klickt nicht Checkbox in Reagieren?

Ich habe dies in Vanille HTML und CSS zu arbeiten, aber wenn ich dies in React versuche, macht das Klicken auf die Beschriftung nichts. ONLY Wenn ich die Checkbox einblende, kann ich auf das Kontrollkästchen klicken und das Label-Styling sehen. Ich möchte das Kontrollkästchen jedoch ausblenden.

Kann jemand das Kontrollkästchen ausblenden und trotzdem auf das Label in ReactJS klicken?

Hier ist die codepen von dem, was ich versuche, in ReactJS zu bauen.

Antwort

3

Verwenden htmlFor statt for in reagieren (siehe reagieren supported attributes):

<input type="checkbox" id="check3"/> Fish 
<label htmlFor="check3"><span class="fa fa-check"/></label> 
Verwandte Themen