点击含图片的React按钮时控制台输出undefined，求原因分析

问题代码 #

import React, { Component } from "react";
import Person from "./Person.js";

class App extends Component {
  clickHandler = (event) => {
    event.preventDefault();
    const data = event.target.value;
    console.log(data);
  };
  url =
    "https://th.bing.com/th/id/OIP.eBSw-Azi3SfBlttoGOip1gHaEr?w=297&h=187&c=7&r=0&o=5&dpr=1.3&pid=1.7";
  render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person clickHandler={this.clickHandler}>Test2</Person>
        <button type="button" value="Dog" onClick={this.clickHandler}>
          <img src={this.url} alt="Funny Dog" />
        </button>
      </div>
    );
  }
}

export default App;

问题描述 #

为button元素定义了value属性值为"Dog"，预期点击包含图片的按钮时控制台输出"Dog"，但实际显示"undefined"。

原因 #

你使用的event.target指向的是实际被点击的DOM元素。当点击按钮里的图片时，event.target对应的是<img>标签，而这个标签本身没有value属性，所以会输出undefined。

而绑定点击事件的是<button>元素，你需要用event.currentTarget——它始终指向绑定了当前事件处理函数的元素，也就是那个带有value="Dog"的按钮。

解决方法 #

修改clickHandler里的取值逻辑即可：

clickHandler = (event) => {
  event.preventDefault();
  const data = event.currentTarget.value; // 将target替换为currentTarget
  console.log(data);
};

这样不管点击按钮内的图片还是按钮本身，currentTarget都会指向按钮元素，就能正确拿到"Dog"了。

内容的提问来源于stack exchange，提问作者Suman kumar