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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download