按钮点击变色时遇handleClick未定义及e.target.name报错求解决

1. 解决“Can't find variable 'handleClick'”错误 #

这个错误是因为你引用了未声明的handleClick函数，需要在作用域内正确声明该函数。比如在React组件中，要在组件内部用const声明：

const handleClick = (e) => {
  // 你的逻辑
};

2. 解决“TypeError: undefined is not an object (evaluating 'e.target.name')”错误 #

这个错误的核心是e.target.name取不到值，常见两种原因及解决办法：

• 原因一：按钮未设置name属性
  确保你的按钮标签上添加了name属性：

  <button name="colorBtn" onClick={handleClick}>点击变色</button>
  

• 原因二：点击时e.target指向按钮内的嵌套元素
  如果按钮内部有其他元素（比如<span>点击变色</span>），点击时e.target会是这个子元素，而子元素没有name属性。此时改用e.currentTarget，它始终指向绑定事件的元素（即按钮本身）：

  const handleClick = (e) => {
    // 用currentTarget代替target
    const btnName = e.currentTarget.name;
    // 执行变色逻辑，比如修改样式或状态
    e.currentTarget.style.backgroundColor = 'red';
  };
  

完整示例代码 #

import { useState } from 'react';

function ColorChangeBtn() {
  const [btnColor, setBtnColor] = useState('blue');

  const handleClick = (e) => {
    // 切换颜色
    const newColor = btnColor === 'blue' ? 'red' : 'blue';
    setBtnColor(newColor);
  };

  return (
    <button
      name="colorBtn"
      onClick={handleClick}
      style={{ backgroundColor: btnColor, color: 'white', padding: '8px 16px' }}
    >
      点击切换颜色
    </button>
  );
}

export default ColorChangeBtn;

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