访问属性时,List元素值返回错误的值

Question

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

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

很明显这是String的一个问题,但我不知道为什么.我正在使用React版本"^ 0.14.7"

Answer 1

说明

这不是React的错.这在HTML5规范中定义为以这种方式运行.根据链接:

4.4.7 li要素

[...]

内容属性:

 全局属性
 如果元素是元素的子ol元素:value- 列表项的序数值

在哪里value定义如下:

该value属性,如果存在的话,必须是一个有效的整数给出列表项的序号值.

并且"有效整数"定义如下:

如果字符串由一个或多个ASCII数字组成,则该字符串是有效整数,可选地带有" - "(U + 002D)字符前缀

[...]

解析整数的规则如以下算法中给出.调用时,必须按给定的顺序执行步骤,在返回值的第一步中止.该算法将返回整数或错误.

1. 让我们input在字符串被解析.

2. 让我们position成一个指针input,最初指向字符串的开头.

3. 让sign值为"正".

4. 跳过空白.

5. 如果position超过了结束input,则返回错误.

6. 如果position(第一个字符)表示的字符是" - "(U + 002D)字符:
   a.让我们sign"消极".
   湾 前进position到下一个角色.
   C.如果position超过了结束input,则返回错误.

7. 否则,如果由位置(第一个字符)指示的字符是"+"(U + 002B)字符:
   a.前进position到下一个角色.("+"被忽略,但不符合.)
   b.如果position超过输入结束,return则出错.

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

9. 收集 ASCII数字字符序列,并将结果序列解释为十进制整数.让value那个整数.

10. 如果sign是"正",则返回值,否则返回value从零减去的结果.

在步骤8和9中,它描述了您看到的行为.以下示例:

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

由于步骤9,第一个返回3.如果第一个字符是整数(仅为3),它将收集所有存在的ASCII数字,并将其解释为整数.在第二个示例中,它返回0,因为:

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

解析失败的H5,因为第一个字符不是+,-或ASCII数字.由于属性被视为缺席,因为它无效,因此它只是0,因为value仍然需要是一个有效的整数.如果传递无法解析的无效整数,则access属性的结果value仅为0,这符合适用段落中的HTML Living Standard:

如果反射IDL属性具有带符号的整数类型(long),则在获取时,必须根据解析有符号整数的规则解析内容属性,如果成功,则该值在IDL属性的类型范围内,必须返回结果值.另一方面,如果它失败或返回超出范围的值,或者属性不存在,则必须返回默认值,如果没有默认值则返回0.在设置时,必须将给定值转换为表示该数字的最短可能字符串作为有效整数,然后该字符串必须用作新的内容属性值.

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

解

所以相反,你可以使用Element.getAttribute.根据链接:

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

该方法不会发生转换.它只是获取值,因为它不需要转换为整数来计算排序,因为HTML确定在何处放置lis.该HTML生活水平概述了此方法的内部工作.它只访问NamedNodeMap包含属性而不进行任何转换.从而:

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

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

这可以通过这样做适用于您的情况:

keyClicked.target.getAttribute("value");