React ignoriert das Attribut 'for' des Label-Elements

250

In React (Facebooks Framework) muss ich ein Beschriftungselement rendern, das mit dem Standardattribut an eine Texteingabe gebunden ist for.

zB wird folgendes JSX verwendet:

<label for="test">Test</label>
<input type="text" id="test" />

Dies führt jedoch dazu, dass HTML das erforderliche (und Standard-) forAttribut fehlt :

<label>Test</label>
<input type="text" id="test">

Was mache ich falsch?

reactjs label goofballLogic
quelle

Antworten:

484

Das forAttribut wird htmlForaus Gründen der Konsistenz mit der DOM-Eigenschafts-API aufgerufen . Wenn Sie den Entwicklungs-Build von React verwenden, sollte in Ihrer Konsole eine Warnung angezeigt werden.

Sophie Alpert
quelle
4
Danke Ben. Könnten Sie mir "aus Gründen der Konsistenz mit der DOM-API" erklären?
goofballLogic
17
Wenn Sie einen haben labelElement (als zurück durch document.createElement, document.getElementByIdetc) Sie ihren Zugang würde forEigenschaft als label.htmlFor.
Sophie Alpert
3
@Meglio In HTML benötigen Sie eine ID, damit das Attribut for funktioniert. Um Ihre Komponente wiederverwendbar zu machen, können Sie Ihrer Komponente eine Namenseigenschaft hinzufügen, die Sie als ID und als Namensattribut für das eigentliche Eingabefeld festlegen.
Wim Mostmans
2
Trotzdem habe ich hier die Antwort gefunden . Sie sagen, einen ID-Generator zu verwenden.
Tobia
2
@ BenAlpert Danke, dass du Licht ins Dunkel gebracht hast. Ich habe mir die DOM-API wegen jQuery und anderen Dingen nie angesehen (bitte verzeihen Sie mir). Falls jemand anderes mehr darüber erfahren möchte, besuchen Sie developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
Alvincrespo
13

Für React müssen Sie die per-define-Schlüsselwörter verwenden, um HTML-Attribute zu definieren.

class -> className

verwendet wird und

for -> htmlFor

wird verwendet, da bei der Reaktion zwischen Groß- und Kleinschreibung unterschieden wird. Stellen Sie sicher, dass Sie nach Bedarf klein und groß sind.

Jani Devang
quelle
3

beide forund classsind reservierte Worte in JavaScript ist der Grund , warum , wenn es um HTML - Attribute in JSX kommt man zu verwenden braucht etwas anderes, React Team entschieden htmlForund classNamejeweils

Dreizack D'Gao
quelle
1
Das hat absolut nichts damit zu tun. Die JSX-Umwandlung könnte es einfach in 'Klasse' übersetzen, was auch für Eigenschaftsnamen gilt. Tatsächlich können Sie in Preact sowohl class als auch className verwenden.
Malte R
3
React könnte es zwar in JSX transformieren, aber nicht. In ihren Dokumenten (Stand: 25. März 2020) heißt es: "Da fores sich bei JavaScript um ein reserviertes Wort handelt, werden htmlForstattdessen React-Elemente verwendet .": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@MalteR können Sie es IE8, IE7 und IE6
Trident D'Gao
0

Das ist htmlFor in JSX und class ist className in JSX

Daniel Nguyen
quelle