List item value returns invalid values ​​when accessing an attribute

Question

I have a React component that I am trying to implement so that it can pass the specific value of the list item that the user clicks on the descriptor method.

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

This works correctly for all elements with an integer number of elements, but when I click on a list item with a value of B , I get 0 as my value, not B Do I really not know the restriction that allows integers to be passed through the onClick methods? Or maybe I did not configure the onClick method onClick . Other examples of this situation:

• value="3f" returns 3
• value="H5" returns 0
• value="35" returns 35

It seems obvious that this is a string problem, but I don't know why. I am using React version "^ 0.14.7"

Answer 1

Explanation

This is not a response error. It is defined in the HTML5 specification to behave this way. Link:

4.4.7 The element li

[...]

Content Attributes:

Global attributes
If the element is a child of the ol element: value - The initial value of the list item

Where value is defined as such:

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.

And a "real integer" is defined as such:

A string is a valid integer if it consists of one or more ASCII characters , optionally prefixed with a "-" character (U + 002D)

[...]

The rules for parsing integers are given in the following algorithm. When called, the steps should be performed in the specified order, interrupted in the first step, which returns a value. This algorithm returns either an integer or an error.

• Let input be processed string.

• Let position be a pointer to input , initially pointing to the beginning of the line.

• Let sign be positive.

• Skip spaces.

• If position completed at the end of input , return an error.

• If the character indicated by the position character (first character) is a "-" character (U + 002D):
  a. Let sign be negative.
  b. Move position next character.
  column If position has passed the end of input , return an error.

• Otherwise, if the character indicated by the position (first character) is the “+” character (U + 002B):
  a. Move position next character. ("+" Is ignored, but this does not match.)
  b. If position passes through the end of the input, return error.

• If the character indicated by the position is not an ASCII digit, return an error.

• Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as an integer from base ten. Let value be an integer .

• If sign is "positive", the return value, otherwise, returns the result of subtracting value from zero.

Steps 8 and 9 describe the behavior that you see. The following examples:

• "3f" returns 3
• "H5" returns 0
• "35" returns 35

The first returns 3 because of step 9. It collects all ASCII digits if the first character is an integer that is 3 and is interpreted as an integer. In the second example, it returns 0 because of this:

If the value attribute is present, user agents must parse it as an integer to determine the value of the attribute. If the attribute value cannot be converted to a number, the attribute should be treated as if it were missing. The attribute does not have a default value.

Analysis is not performed on H5 because the first character is not + , - or an ASCII digit. Since the attribute is considered absent because it is invalid, it is 0, because value must still be a valid integer. If you pass an invalid integer that cannot be parsed, the result of the access attribute value is 0, which corresponds to the HTML Living Standard , in the applicable paragraph:

If the reflecting IDL attribute has an integer type with a sign ( long ), then upon receipt the content attribute should be analyzed in accordance with the rules for parsing signed integers , and if it is successful, and the value is in the range of the IDL attribute type, the resulting value must be returned. If, on the other hand, it fails or returns a value out of range or if the attribute is missing, then the default value should be returned instead, or 0 if the default value is missing. When configured, this value should be converted to the shortest possible string representing the number as a real integer, and then this string should be used as the new value for the content attribute.

Here the value attribute does not have a default value, and in this case H5 not a valid integer, therefore, parsing is not performed, and 0 returned by the specification. The last example returns 35, because it is a fully valid integer for value .

Decision

So you can use Element.getAttribute . Link:

getAttribute() returns the value of the specified attribute of the element

There is no conversion in the method. It just gets the value, since it doesn't need to convert to an integer to determine the order, like HTML to determine where to place li s. HTML Living Standard describes the inner workings of this method. It simply accesses the NamedNodeMap attributes and has no conversion. In this way:

 console.log(document.getElementById("test").getAttribute("value")); 

 <ul> <li value="Foobar" id="test">Test</li> </ul> 

This can be applied to your situation by following these steps:

 keyClicked.target.getAttribute("value"); 

Answer 2

It appears that value when used with li should be a number. Instead, I will try:

 <li data-value="123abc">123abc</li> keyHandler.target.getAttribute('data-value'); 

Answer 3

The HTMLLIElement.value property gets or sets the serial number of the list item and is always a number. If you want to get a string value, you must read the value attribute.

 keyHandler.target.getAttribute('value')