如何在ReactJS中检查事件目标的类名？

现在我有了一个函数

handleRightClick（e）

，当我右键单击容器时将调用该函数。在容器内部，有几个

项

s，我希望只有右键单击其中一个

项

s时才会显示菜单

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>
        );
    }
}

这是类

项

：

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>
        );
    }
}

---

我想检查事件目标是否为

Item

class。如何访问事件目标的类名？

要在

className

访问元素，请使用

e.target.className

试试这个

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);
    }
    ...
}

在没有lib的javascript上也是如此

如果控制台中出现空结果，这意味着您尚未在渲染返回中设置

项

类的

类名

。您可以将您的类更改为这样：

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);
    }
}

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>
            );
    }
}

结果 单击其中一个

项目时，将显示该菜单


单击
项目外部时，将不显示菜单

您需要访问
类名
或组件名称吗？我很困惑，我更新了我的问题。我想访问名为
Item
的类扩展
React.Component
类的类名，该类最初是如何设置的？它是动态的吗？你是对的，但它给了我
IMG
或
H4
或
DIV
。这些结果太详细了。请使用
stopPropagation（）
获取元素的类名，而不是它们的父元素。如果我
调用stopPropagation（）
，chrome的默认上下文菜单会出现，我仍然会得到
IMG
，
H4
或
DIV
如果您使用
e.target.className
您的结果就是类名（.className），如果您使用
e.target.nodeName
您的结果是'LI'，IMG'，'DIV'，如果我使用
e.target.className
，控制台中会出现一个空结果。
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>
            );
    }
}

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();
}