访问属性时列表元素值返回错误值

Question

我有一个我正在尝试实现的 React 组件，以便它可以将用户单击的列表项的特定值传递给句柄方法。

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

这适用于所有整数值列表项，但是当我单击值为 B 的列表项时，我收到 0 作为我的值，而不是 B。我是否不知道只允许整数通过onClick 方法传递的限制？或者我可能错误地配置了onClick 方法。这种情况的其他例子：

• value="3f" 返回3
• value="H5" 返回0
• value="35" 返回35

这似乎是字符串的问题，但我不知道为什么。我正在使用 React 版本“^0.14.7”

Answer 1

说明

这不是 React 的错。这是在HTML5 Specification 中定义的以这种方式运行。根据链接：

4.4.7 li 元素

[...]

Content attributes:

 Global attributes
 如果元素是 ol 元素的子元素：value - 列表项的序号

value 的定义如下：

value 属性（如果存在）必须是 valid integer，提供列表项的序数值。

并且“有效整数”是这样定义的：

如果字符串由一个或多个ASCII digits 组成，则该字符串是一个有效整数，可选前缀为“-”（U+002D）字符

[...]

解析整数的规则如以下算法所示。调用时，必须按照给定的顺序执行这些步骤，在返回值的第一步中止。此算法将返回整数或错误。

1. 设input 为被解析的字符串。

2. 让position 成为指向input 的指针，最初指向字符串的开头。

3. 让sign 的值为“正”。

4. Skip whitespace.

5. 如果position 超出input 的末尾，则返回错误。

6. 如果position（第一个字符）指示的字符是“-”（U+002D）字符：
   一个。让sign 为“负数”。
   乙。将position 前进到下一个字符。
   c。如果position 超过input 的结尾，则返回错误。

7. 否则，如果位置指示的字符（第一个字符）是“+”（U+002B）字符：
   一个。将position 前进到下一个字符。 （“+”被忽略，但不符合要求。）
   乙。如果position 超出输入末尾，return 会出错。

8. 如果位置指示的字符不是ASCII数字，则返回错误。

9. Collect a sequence of characters 是 ASCII 数字，并将结果序列解释为以十为底的整数。让value 成为那个整数。

10. 如果sign为“正”，则返回值，否则返回零减去value的结果。

在第 8 步和第 9 步中，它描述了您看到的行为。以下示例：

• “3f”返回 3
• “H5”返回 0
• “35”返回 35

由于第 9 步，第一个返回 3。如果第一个字符是整数（即 3），它会收集所有存在的 ASCII 数字，并将其解释为整数。在第二个示例中，它返回 0 是因为：

如果存在value 属性，用户代理必须将其解析为整数，以确定该属性的值。如果属性的值不能转换为数字，则必须将该属性视为不存在。该属性没有默认值。

H5 上的解析失败，因为第一个字符不是 +、- 或 ASCII 数字。由于该属性被视为不存在，因为它是无效的，所以它只是 0，因为value 仍然需要是一个有效的整数。如果您传递了一个无法解析的无效整数，则访问属性value 的结果仅为0，即根据HTML Living Standard，在适用的段落中：

如果反射IDL属性是有符号整数类型（long），那么在获取时，必须根据rules for parsing signed integers解析内容属性，如果解析成功，则取值范围为IDL 属性的类型，必须返回结果值。 另一方面，如果它失败或返回超出范围的值，或者如果该属性不存在，则必须返回默认值，如果没有默认值，则返回 0。设置时，必须将给定值转换为将数字表示为有效整数的最短字符串，然后该字符串必须用作新的内容属性值。

这里，value 属性未定义为具有默认值，在这种情况下，H5 不是有效整数，因此解析失败，0 由规范返回。最后一个示例返回 35，因为它是 value 的完全有效整数。

解决方案

因此，您可以改用Element.getAttribute。根据链接：

getAttribute()返回元素上指定属性的值

方法中没有发生转换。它只是获取值，因为它不需要转换为整数来确定排序，因为 HTML 确定将lis 放置在哪里。 HTML Living Standard 概述了此方法的内部工作原理。它只是访问一个包含属性的NamedNodeMap，而不进行任何转换。因此：

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

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

这可以通过执行以下操作应用于您的情况：

keyClicked.target.getAttribute("value");

Answer 2

似乎value 与li 一起使用时必须是一个数字。我会试试这个：

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

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

Answer 3

HTMLLIElement.value 属性 获取或设置列表元素的序号，并且始终是一个数字。如果要获取字符串值，则必须改为读取value 属性。

keyHandler.target.getAttribute('value')