javascript - 可以访问event.target，里面有value属性，但是event.target.value总是返回undefined？

Question

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

我试过复制其他代码。我试过谷歌搜索和搜索 Stack Overflow。我试过使用 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 时得到数字，但每次我都得到 undefined。

event.target 返回:

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

同一元素的 event.target.value 返回:

undefined

我做错了什么？

Answer 1

.value DOM 节点上的 property 仅适用于 <input> 之类的东西或 <textarea> .对于其他元素(如您的 <div> )，您必须通过 .getAttribute() 获取值.因此

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

应该按照你的要求去做。