Comment vérifier le nom de classe de la cible d'événement dans ReactJS?

Question

J'ai maintenant une fonction handleRightClick(e) qui sera appelée lorsque je clique avec le bouton droit sur le conteneur. À l'intérieur du conteneur, il y a plusieurs Item et je m'attends à ce que le menu ne s'affiche que lorsque je clique avec le bouton droit sur l'un des 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>
        );
    }
}

Si je console.log(e), j'obtiens ceci dans chrome:

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

C'est la classe 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>
        );
    }
}

Enfin, je vais l'utiliser pour former quelque chose comme ceci:

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

Je veux vérifier si la cible de l'événement est Item class. Comment puis-je accéder au nom de classe de la cible de l'événement?

Answer 1

Pour accéder à className un élément, utilisez e.target.className

Essayez avec ça

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

C'est la même chose sur javascript sans lib's

Si un résultat vide apparaît dans la console, cela signifie que vous n'avez pas défini le className de la classe Item dans le retour rendu. Vous pouvez changer votre classe pour être comme ceci:

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

Maintenant, la handleRightClick(e) résultante devrait ressembler à ceci:

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

Résultat

Le menu s'affiche lorsque vous cliquez sur l'un des Item.

Le menu ne s'affiche pas lorsque vous cliquez en dehors de Item.