React组件onClick事件完全失效问题求助

核心错误 #

你绑定onClick时犯了一个低级错误：

// 错误写法：箭头函数只返回了handleEvent函数，根本没调用它
onClick={() => handleEvent}

这种写法相当于点击后什么都没执行，因为只是把函数本身返回了，没有触发执行。

两种正确写法 #

写法一：直接传函数引用（推荐） #

不需要额外包装箭头函数，直接把处理函数传给onClick，React会自动把事件对象传递给它：

<li className="down" onClick={handleEvent}>
  <img alt={'THIS IS AN IM'} width={30} height={30} src={iconsdown} />
</li>

写法二：箭头函数内调用函数（适合需要传额外参数的场景） #

如果需要给handleEvent传自定义参数，才需要用箭头函数包裹并调用：

// 比如要传额外参数id
<li className="down" onClick={(e) => handleEvent(e, 'some-id')}>
  <img alt={'THIS IS AN IM'} width={30} height={30} src={iconsdown} />
</li>

对应的处理函数也要接收这个参数：

const handleEvent=(e, id) =>{
    console.log(id);
    // ...其他逻辑
}

额外提醒 #

1. 别用document.write(42)，它会直接清空整个页面的内容，完全破坏React的DOM渲染逻辑，测试用console.log就够了。
2. 你用e.target获取元素时要注意：如果点击的是li里的img，e.target会是img标签，而不是绑定事件的li。如果要始终拿到绑定事件的那个元素，改用e.currentTarget：

const handleEvent=(e) =>{
    console.log(e.currentTarget); // 始终是绑定onClick的li元素
    const list = e.currentTarget.parentElement;
    const icon_down = e.currentTarget;
}

内容的提问来源于stack exchange，提问作者rakib .h