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版本＆＃34; ^ 0.14.7＆＃34;

Answer 1

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

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

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

Answer 2

HTMLLIElement.value 属性获取或设置list元素的序数，并且始终为数字。如果您想获取字符串值，则必须先阅读value 属性。

keyHandler.target.getAttribute('value')

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

2 个答案: