Javascript 单击时检查是否存在类（反应）

我想检查单击某个特定元素时是否具有指定的类。我知道您可以绑定一个click处理程序，它将

e.target

传递给该处理程序。我的想法是获取

e.target.classList.indexOf（this.myClass）>-1

以查看它是否有类，但我得到以下错误

e、 target.classList.indexOf不是函数

我假设这是因为

classList

是一个类似数组的对象，而不是实际的数组。有没有一种更简单的方法可以从React中单击的元素中获取类列表，而不必执行所有的“切片调用”魔术

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.myClass='myClass'； } handleClick（e）{ //检查e.target类是否有this.myClass 如果（/*逻辑*/）{ //行动 } } render（）{ 返回 我的组件 } }

---

如何从点击React事件系统的“目标”元素中获取类数组？

元素。classList

提供了一个

包含（）

函数，可以解决您的问题：

e.target.classList.contains(this.myClass)

---

还请注意，

此

可能不是您在事件处理程序中所认为的，除非您显式绑定函数上下文，例如使用

bind（）

您可以使用方法

包含（字符串）

检查类中是否存在指定的类值 元素的属性

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.myClass='myClass'； this.handleClick=this.handleClick.bind（this）； } handleClick（e）{ log（e.currentTarget.classList.contains（this.myClass）） } render（）{ 返回 我的组件 } } ReactDOM.render( , document.getElementById（'容器'） );

是的，完全忘记了添加

onClick

，感谢

contains（）

的提示！在某些情况下，

e.target

会被其他组件弄错，除非您自己处理泡沫噩梦。现在就去试一下。如果您希望获得与事件所附加到的标记完全相同的标记，我建议使用

e.currentTarget

。在react中，您可以基于状态（您可能用于分配类名）而不是类名本身来创建逻辑。如果我将单击处理程序分配给外部元素，如果希望它只在单击外部元素（而不是内部元素）时触发，我如何在不检查类名的情况下执行此检查？我更喜欢将事件目标与外部div进行比较，以避免弄乱类名

if（e.target==ReactDOM.findDOMNode（this））…

@jokka-这正是我的想法。唯一需要注意的是，它不适用于无状态组件。然而，这里的情况并非如此。

e.target.classList.contains(this.myClass)