Himmel Himmel - 1 year ago 43
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

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
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) {
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>


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

Answer Source

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



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().