137
rated 0 times
[
143]
[
6]
/ answers: 1 / hits: 62727
/ 8 Years ago, sat, july 9, 2016, 12:00:00
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?
More From » reactjs
