ReactJSでイベントターゲットのクラス名を確認する方法は？

Question

コンテナを右クリックすると呼び出される関数handleRightClick(e)ができました。コンテナ内にはいくつかのItemsがあり、Itemsの1つを右クリックしたときにのみメニューが表示されると思います。

_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 console：

_> 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の外側をクリックしてもメニューは表示されません。