Question

我是React的新手。这绝对让我感到困惑。我可以使用event.target访问HTML元素，它显示的值等于某个数字，但是每次使用event.target.value时，我都无法定义。

我尝试复制其他代码。我试过谷歌搜索和搜索堆栈溢出。我尝试使用currentTarget而不是target并获得完全相同的结果。这是非常简单的东西。怎么了？。

class Calculator extends React.Component {
  constructor() {
    super();
    this.state = {
      input : "0"
    }
    this.handleNumber = this.handleNumber.bind(this);
  }

  handleNumber(event) {
    event.preventDefault();
    console.log(event.target);
    console.log(event.target.value);
  }

  render() {
    return (
      <div id="calculatorLayout">
        <div id="display">{this.state.input}</div>
        <div className="calculatorButtons" id="zero" value="0" onClick={this.handleNumber}>0</div>
        <div className="calculatorButtons" id="one" value="1" onClick={this.handleNumber}>1</div>
        <div className="calculatorButtons" id="two" value="2" onClick={this.handleNumber}>2</div>

...等等。

我希望在访问event.target.value时会得到数字，但是每次我都不确定时。

event.target返回：

<div class="calculatorButtons" id="zero" value="0">0</div>

相同元素的

event.target.value返回：

undefined

我在做什么错了？

Answer 1

DOM节点上的.value 属性仅适用于<input>或<textarea>之类的事物。对于其他元素（例如<div>），则必须通过.getAttribute()获取值。因此

  console.log(event.target.getAttribute("value"));

应该按照您的要求做。

是否可以访问具有值属性的event.target，但event.target.value始终返回未定义？

1 个答案: