Himmel Himmel - 3 months ago 9
Javascript Question

Check for existence of classes on click (React)

I want to check to see if a particular element, when clicked, has a specified class. I know that you can bind a click handler which passes

e.target
to the handler. My thinking was to get
e.target.classList.indexOf(this.myClass) > -1
to see if it has the class, but I get the following error.


e.target.classList.indexOf is not a function


I assume this is because
classList
is an array-like object, and not an actual array. Is there a simpler way to get a list of classes from a clicked element in React without performing all of the "slice call" magic?

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myClass = 'my-class';
}

handleClick(e) {
// check if e.target class has this.myClass
if (/* logic */) {
// perform action
}
}

render() {
return <div onClick={this.handleClick.bind(this)} className={this.myClass + ' other-class'}>
<div>My Component</div>
</div>
}

}


How can I get an array of classes from the "target" element of a click in React's event system?

Answer

Element.classList provides a contains() function which should solve your issue:

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

Docs


Also note that this may not be what you think it is in your event handler, unless you bind the function context explicitly, e.g. using bind().

Comments