How to check the class name of the event target in ReactJS?

Question

I now have a function handleRightClick(e) which will be called when I right click on the container. Inside the container, there are several Items and I expect the menu will be shown only when I right click one of the Items.

export default class ProjectContainer extends React.Component {
    ...
    handleRightClick(e) {
        console.log(e.target.name); // I want to check the event target whether is `Item` Class.
        this.refs.rightClickMenu.reShow(e.clientX, e.clientY); // This will open the right click menu.
    }
    ...
    render() {
        return (
            <div style={styles.root} onContextMenu={this.handleRightClick} onClick={this.handleLeftClick}>
                <Item /><Item /><Item /><Item /><Item /><Item /><Item />
                <RightClickMenuForProjectItem ref='rightClickMenu'/>
            </div>
        );
    }
}

If I console.log(e), I get this in Chrome console:

> Object {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "contextmenu"…}

This is the class Item:

export default class Item extends React.Component {
    render() {
        return (
            <Card style={styles.card} onClick={this.props.onClick}>
                <img style={styles.img}/>
                <div style={styles.divInfo}>
                    <h4 style={styles.title}>{this.props.title}</h4>
                    <div style={styles.projectType}>{this.props.projectType}</div>
                </div>
            </Card>
        );
    }
}

Finally, I will use it to form something like this:

handleRightClick(e) {
    if (e.target.className == "Item") {
        // Open the right click menu only when I right click one of the Item.
        this.refs.rightClickMenu.reShow(e.clientX, e.clientY);
    }
}

I want to check the event target whether is Item class. How can I access the class name of the event target?

Solution

To access at className an element use e.target.className

Try with this

export default class ProjectContainer extends React.Component {
    ...
    handleRightClick(e) {
        // To avoid get wrong class name, use this.
        // But if the default context menu come up, without this is OK.
        e.stopPropagation()
        console.log(e.target.className); // This get the className of the target
        this.refs.rightClickMenu.reShow(e.clientX, e.clientY);
    }
    ...
}

This is the same on javascript without lib's

If an empty result is appeared in the console, this means that you haven't set the className of the Item class in the render return. You can change your class to be like this:

const className = 'Item';
export default class Project extends React.Component {
    ...
    render() {
            return (
                <Card style={styles.card} onClick={this.props.onClick} className={className}>
                    <img style={styles.img} className={className}/>
                    <div style={styles.divInfo} className={className}>
                        <h4 style={styles.title} className={className}>{this.props.title}</h4>
                        <div style={styles.projectType} className={className}>{this.props.projectType}</div>
                    </div>
                </Card>
            );
    }
}

Now the resulting handleRightClick(e) should be like this:

handleRightClick(e) {
    if (e.target.className == 'Item')
        //Show the menu if it is not visible, reShow the menu if it is already visible
        this.refs.rightClickMenu.reShow(e.clientX, e.clientY);
    else
        //Hide the menu
        this.refs.rightClickMenu.hide();
}

Result

The menu will be shown when click one of the Item.

The menu will not be shown when click outside the Item.

Comments

[Casper]

You are right, but it gives me IMG or H4 or DIV. These results are too detailed.

[Rui Costa]

use stopPropagation() to get the className of your element clicked not their parents.

[Casper]

If I call stopPropagation(), the default context menu from chrome come out and I still get IMG, H4 or DIV.

[Rui Costa]

@CasperLI if you use e.target.className your result is the className (.className), if you use e.target.nodeName your result is 'LI', 'IMG', 'DIV'

[Casper]

If I use e.target.className, an empty result appears in the console.

[Rui Costa]

@CasperLI ok, but your need (before) set className attribute to your element. show me the return()lines into your react code to help you.

[Casper]

Let us continue this discussion in chat.