12

enter image description here

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Casper
  • 4,435
  • 10
  • 41
  • 72

1 Answers1

19

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.
enter image description here

The menu will not be shown when click outside the Item.
enter image description here

Casper
  • 4,435
  • 10
  • 41
  • 72
Rui Costa
  • 800
  • 4
  • 13
  • You are right, but it gives me `IMG` or `H4` or `DIV`. These results are too detailed. – Casper Jul 10 '16 at 04:31
  • use `stopPropagation()` to get the className of your element clicked not their parents. – Rui Costa Jul 10 '16 at 04:40
  • If I `call stopPropagation()`, the default context menu from chrome come out and I still get `IMG`, `H4` or `DIV`. – Casper Jul 10 '16 at 04:47
  • @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' – Rui Costa Jul 10 '16 at 04:49
  • 1
    If I use `e.target.className`, an empty result appears in the console. – Casper Jul 10 '16 at 05:01
  • @CasperLI ok, but your need (before) set className attribute to your element. show me the `return()`lines into your react code to help you. – Rui Costa Jul 10 '16 at 05:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116910/discussion-between-casper-li-and-rui-costa). – Casper Jul 10 '16 at 05:08