Reagieren ignoriert 'für' - Attribut des label-Elements

In Reagieren (Facebook ' s framework), ich brauche zum Rendern ein label-element gebunden, um eine text-Eingabe mit dem standard - for Attribut.

z.B. die folgenden JSX verwendet:

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

Jedoch, dies erzeugt HTML-fehlen die erforderlichen (und standard) for Attribut:

<label data-reactid=".1.0.0">Test</label>
<input type="text" id="test" data-reactid=".1.0.1">

Was mache ich falsch?

InformationsquelleAutor goofballLogic | 2014-03-31
  1. 364

    Den for - Attribut wird aufgerufen htmlFor für die Konsistenz mit der DOM-Eigenschaft-API. Wenn Sie mit der development build zu Reagieren, die man gesehen haben sollte eine Warnung in der Konsole darüber.

    • Danke Ben. Könnten Sie erklären, "für die Konsistenz mit der DOM-API" für mich?
    • Wenn Sie eine label element (zurückgegeben durch document.createElement, document.getElementById usw) würden Sie den Zugriff auf Ihre for Eigenschaft als label.htmlFor.
    • Ah, macht Sinn.
    • In Reagieren, gibt es eine Möglichkeit, die Verknüpfung eines Labels mit einem Eingang ohne Ausweis? Wenn ich ID und re-verwenden Sie eine Komponente, es endet für die Seite, die mehrere Eingänge mit der gleichen id.
    • In HTML müssen Sie eine ID für das Attribut zu arbeiten. Um Ihren wiederverwendbare Komponente, die Sie hinzufügen könnte die Eigenschaft name der Komponente, die Sie als set-ID-und name-Attribut auf das eigentliche Eingabefeld.
    • was, wenn ich nicht einen eindeutigen Namen haben Eigentum? Was ist eine sichere Methode zum generieren eindeutiger IDs? Vielleicht eine Klasse variable, die wird jedes mal erhöht, es verwendet? Kann ich nicht einfach Fragen Reagieren, für die ID der aktuellen Komponente? Es ist sicherlich eine.
    • Nevermind, ich fand die Antwort hier. Sie sagen, verwenden ein ID-generator.
    • Vielen Dank für die Aufschluss über, die. Ich habe nie verwendet, um den Blick auf die DOM-API, weil von jQuery und sowas (bitte verzeih mir). Aber falls jemand interessiert ist mehr zu erfahren über das, check out developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement.
    • im Gegensatz zu dem, was gesagt wurde, wenn htmlFor ist das react-Attribut anstelle des for es sich möglicherweise nicht auf die Konsistenz ankommt, sondern weil for ist ein reserviertes Wort in Javascript (und Reagieren, verwendet Javascript zum Rendern). Das ist zumindest der Grund, den Angaben des [facebook.github.io/reagieren/docs/... - Dokumentation)

    InformationsquelleAutor Sophie Alpert
  2. 11

    Ja, für reagieren,

    wird htmlFor
    Klasse className wird
    etc.

    vollständige Liste finden Sie, wie HTML-Attribute geändert werden, hier:

    https://facebook.github.io/react/docs/dom-elements.html

    InformationsquelleAutor Derrick
  3. 10

    Für Reagieren, müssen Sie es pro-definieren Sie Schlüsselwörter für die Definition von html-Attributen.

    class -> className

    verwendet wird und

    for -> htmlFor

    verwendet wird, wie reagieren-und Kleinschreibung stellen Sie sicher, dass Sie Folgen müssen kleine und Kapital erforderlich.

    InformationsquelleAutor Jani Devang
  5. 0

    Ist htmlFor in JSX und Klasse className in JSX

    InformationsquelleAutor Daniel Nguyen
Schreibe einen Kommentar