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

Question

我现在有一个函数 handleRightClick(e)，它会在我右键单击容器时调用。在容器内，有几个 Items，我希望只有当我右键单击其中一个 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>
        );
    }
}

如果我 console.log(e)，我会在 Chrome 控制台中得到这个：

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

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

最后，我会用它来组成这样的东西：

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

我想检查事件目标是否是Item class。如何访问事件目标的 class 名称？

Answer 1

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

这与 javascript 相同，没有库

如果控制台中出现空结果，这意味着您没有在渲染return中设置Itemclass的className。你可以把你的 class 改成这样：

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) 应该是这样的：

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

结果

单击其中一个 Item 时将显示菜单。

在 Item 之外单击时，将不会显示菜单。

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

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

javascript

classname

dom-events

reactjs

react-dom

结果