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

Question

我现在有一个函数handleRightClick(e),当我右键单击容器时将调用该函数.在容器内部,有几个Items,我希望只有当我右键单击其中一个时才会显示菜单Item.

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"…}

这是班级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类.如何访问事件目标的类名？

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

这在没有lib的javascript上是一样的

如果一个空的结果出现在控制台中,这意味着你没有设置className的的Item类在渲染回报.您可以将您的班级更改为:

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.