Frage Der Listenelementwert gibt beim Zugriff auf das Attribut falsche Werte zurück


Ich habe eine React-Komponente, die ich zu implementieren versuche, damit sie den bestimmten Wert des Listenelements übergeben kann, auf den ein Benutzer auf eine Handle-Methode klickt.

var React = require('react');
var {connect} = require('react-redux');

export var Keyboard = React.createClass({
    handleKeyClick: function(keyClicked)
      {
          console.log(keyClicked.target.value);       
      },  
    render: function () {
        return (
            <ul onClick={(e) => this.handleKeyClick(e)}>
                <li value="1">1</li>
                <li value="2">2</li>
                <li value="3">3</li>
                <li value="4">4</li>
                <li value="5">5</li>
                <li value="6">6</li>
                <li value="7">7</li>
                <li value="8">8</li>
                <li value="9">9</li>
                <li value="0">0</li>
                <li value="B">B</li>
             </ul>  
        );
    }

 });
 export default connect()(Keyboard);

Dies funktioniert ordnungsgemäß für alle Integer-Wert-Listenelemente, aber wenn ich auf das Listenelement mit dem Wert von klicken B, Ich empfange 0 als meinen Wert, anstatt B. Ist mir eine Einschränkung nicht bewusst, dass nur Ganzzahlen durchgelassen werden können onClick Methoden? Oder vielleicht habe ich das konfiguriert onClick Methode falsch. Andere Beispiele für diese Situation:

  • value="3f" kehrt zurück 3 
  • value="H5" kehrt zurück 0 
  • value="35" kehrt zurück 35

Es scheint offensichtlich, dass dies ein Problem mit dem String ist, aber ich weiß nicht warum. Ich benutze die React-Version "^ 0.14.7"


5
2018-02-27 23:47


Ursprung


Antworten:


Erläuterung

Das ist nicht die Schuld von React. Dies ist in der definiert HTML5-Spezifikation sich so verhalten. Per dem Link:

4.4.7 li Element

[...]

Inhaltsattribute:

Globale Attribute
Wenn das Element ein Kind von einem ist ol Element: value - Ordnungszahl des Listenelements

Woher value ist wie folgt definiert:

Das value Attribut, falls vorhanden, muss ein sein gültige Ganzzahl Geben Sie den Ordinalwert des Listenelements an.

Und eine "gültige ganze Zahl" ist als solche definiert:

Eine Zeichenfolge ist ein gültige Ganzzahl wenn es aus einem oder mehreren besteht ASCII-Ziffern, optional mit einem Präfix "-" (U + 002D)

[...]

Das Regeln zum Analysieren von ganzen Zahlen sind wie im folgenden Algorithmus angegeben. Wenn sie aufgerufen werden, müssen die Schritte in der angegebenen Reihenfolge befolgt werden, wobei der erste Schritt abgebrochen wird, der einen Wert zurückgibt. Dieser Algorithmus gibt entweder eine Ganzzahl oder einen Fehler zurück.

  1. Lassen input sei die Zeichenfolge, die analysiert wird.

  2. Lassen position sei ein Zeiger in input, anfänglich auf den Anfang der Zeichenfolge zeigend.

  3. Lassen sign habe den Wert "positiv".

  4. Whitespace überspringen

  5. Ob position ist über das Ende von input, gib einen Fehler zurück.

  6. Wenn das Zeichen von angezeigt wird position (das erste Zeichen) ist ein "-" (U + 002D) Zeichen:   
    ein. Lassen sign sei "negativ".   
    b. Vorrücken position zum nächsten Zeichen.   
    c. Ob position ist über das Ende von input, gib einen Fehler zurück.

  7. Andernfalls, wenn das Zeichen, das durch Position (das erste Zeichen) angezeigt wird, ein "+" (U + 002B) -Zeichen ist:   
    ein. Vorrücken position zum nächsten Zeichen. (Das "+" wird ignoriert, aber es ist nicht konform.)   
    b. Ob position ist nach dem Ende der Eingabe, return ein Fehler.

  8. Wenn das durch Position angegebene Zeichen keine ASCII-Ziffer ist, geben Sie einen Fehler zurück.

  9. Sammle eine Sequenz von Charakteren Das sind ASCII-Ziffern und interpretieren die resultierende Folge als eine Basis-Zehn-Ganzzahl. Lassen value sei diese ganze Zahl.

  10. Ob sign ist "positiv", Rückgabewert, ansonsten Rückgabe des Subtraktionsergebnisses value von Null.

In den Schritten 8 und 9 wird das Verhalten beschrieben, das Sie sehen. Die folgenden Beispiele:

  • "3f" gibt 3 zurück
  • "H5" gibt 0 zurück
  • "35" gibt 35 zurück

Die erste gibt 3 aufgrund von Schritt 9 zurück. Sie sammelt alle vorhandenen ASCII-Ziffern, wenn das erste Zeichen eine ganze Zahl ist, die nur 3 ist, und interpretiert sie als eine Ganzzahl. Im zweiten Beispiel gibt es deshalb 0 zurück:

Wenn die value Attribut vorhanden ist, müssen Benutzeragenten es als Ganzzahl analysieren, um den Wert des Attributs zu bestimmen. Wenn der Wert des Attributs nicht in eine Zahl konvertiert werden kann, muss das Attribut so behandelt werden, als wäre es nicht vorhanden. Das Attribut hat keinen Standardwert.

Parsing schlägt fehl H5 weil das erste Zeichen nicht ist +, -oder eine ASCII-Ziffer. Da das Attribut als ungültig behandelt wird, ist es nur 0, weil value muss immer noch eine gültige Ganzzahl sein. Übergeben Sie eine ungültige Ganzzahl, die nicht analysiert werden kann, das Ergebnis des Zugriffsattributs value ist nur 0, was pro ist HTML Lebensstandardim zutreffenden Absatz:

Wenn ein reflektierendes IDL-Attribut einen Ganzzahl-Typ mit Vorzeichen hat (long) dann muss das Inhaltsattribut beim Holen geparst werden Regeln zum Parsen von vorzeichenbehafteten GanzzahlenWenn dies der Fall ist und der Wert im Bereich des IDL-Attributtyps liegt, muss der resultierende Wert zurückgegeben werden. Wenn es andererseits fehlschlägt oder einen außerhalb des Bereichs liegenden Wert zurückgibt, oder wenn das Attribut nicht vorhanden ist, muss stattdessen der Standardwert zurückgegeben werden, oder 0, wenn kein Standardwert vorhanden ist. Bei der Einstellung muss der angegebene Wert in die kürzest mögliche Zeichenfolge konvertiert werden, die die Zahl als gültige Ganzzahl darstellt, und diese Zeichenfolge muss dann als neuer Inhaltsattributwert verwendet werden.

Hier das value Attribut ist nicht definiert, um einen Standardwert zu haben, und in diesem Fall H5 ist keine gültige Ganzzahl, so dass das Parsen fehlschlägt und 0 wird nach Spezifikation zurückgegeben. Das letzte Beispiel gibt 35 zurück, weil es eine vollständig gültige Ganzzahl für ist value.

Lösung

Also, stattdessen können Sie verwenden Element.getAttribute. Per dem Link:

getAttribute() Gibt den Wert eines angegebenen Attributs für das Element zurück

In der Methode findet keine Konvertierung statt. Es erhält nur den Wert, da es nicht in Ganzzahl konvertieren muss, um die Reihenfolge zu ermitteln, wie es HTML tut, um zu bestimmen, wo die Position platziert werden soll lis. Das HTML Lebensstandard umreißt die internen Abläufe dieser Methode. Es greift nur auf a zu NamedNodeMap enthält Attribute und führt zu keiner Konvertierung. So:

console.log(document.getElementById("test").getAttribute("value"));
<ul>
  <li value="Foobar" id="test">Test</li>
</ul>

Dies kann folgendermaßen auf Ihre Situation angewendet werden:

keyClicked.target.getAttribute("value");

22
2018-02-28 00:17



Anscheinend value bei Verwendung mit einem li muss eine Nummer sein. Ich würde das stattdessen versuchen:

<li data-value="123abc">123abc</li>

keyHandler.target.getAttribute('data-value');

1
2018-02-27 23:57



Das HTMLLIElement.value  Eigentum ruft oder setzt die Ordinalzahl des Listenelements und ist immer eine Zahl. Wenn Sie den Zeichenfolgenwert erhalten möchten, müssen Sie die value  Attribut stattdessen.

keyHandler.target.getAttribute('value')

0
2018-02-28 00:09