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

Posted 2023-03-16

【中文标题】如何在 ReactJS 中检查事件目标的类名？

【英文标题】：How to check the class name of the event target in ReactJS?

【发布时间】：2016-11-12 04:13:43

【问题描述】：

我现在有一个函数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"…

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

【问题讨论】：

您需要访问className 或组件名称？我很困惑

我更新了我的问题。我想访问一个名为 Item 的类扩展 React.Component

类最初是如何设置的？它是动态的吗？

也检查e.target.classList

【参考方案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 上是一样的

如果控制台出现空结果，说明你没有在渲染返回中设置Item类的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) 应该是这样的：

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之外点击菜单不会显示。

【讨论】：

你是对的，但它给了我IMG 或H4 或DIV。这些结果太详细了。

使用stopPropagation() 来获取你的元素的className，而不是他们的父元素。

如果我call stopPropagation()，chrome 的默认上下文菜单出来了，我仍然得到IMG、H4 或DIV。

@CasperLI 如果你使用e.target.className，你的结果是类名（.className），如果你使用e.target.nodeName，你的结果是'LI'，'IMG'，'DIV'

如果我使用e.target.className，控制台中会出现一个空结果。