时间戳

首页 > 解决方案 > 如何恢复 Icon Ant Design 的类型？

reactjs - 如何恢复 Icon Ant Design 的类型？

问题描述

我使用 Icon Ant Design，我想恢复我的 Icon 的类型，以便在单击她时使用它来更改颜色。但是类型没有定义

<Icon                                
     type="highlight"                                
     onClick={(() =>this.setState({ iconSelected: this.props.type,}),                                    
          () => console.log(this.props.type))
     }

     style={{height: 50, width: 50, fontSize: 20, color: iconSelected == this.props.type ? "#1890ff" : "grey"}}
/>

标签： reactjsantd

解决方案

在您的点击处理程序中，this不引用图标本身。您要访问的是您需要作为参数传递给处理函数的事件对象。然后您可以访问事件的target，它是图标本身的 DOM 节点，它有一个data-icon包含图标名称的属性，您可以使用 vanilla DOM 方法访问该属性：

<Icon type="mail" onClick={(e) => console.log(e.target.getAttribute('data-icon'))}/>

这将记录图标名称，但您可以使用它做任何您需要的事情。

推荐阅读