反应图标点击事件

Question

我在一些按钮上使用了 npm react-icons。

不幸的是，该图标使 onClick 属性停止工作。如果您单击图标外部角落中的按钮，它可以正常工作。

我想知道是否有一个简单的解决方案，不涉及将 onClick 函数作为道具传递并进入 react-icons 代码并将 onClick 添加到其中。

模块中的代码是

    import React from 'react'
    import Icon from 'react-icon-base'

    const FaArrowUp = props => (
        <Icon viewBox="0 0 40 40" {...props}>
            <g><path d="m37.5 21.7q0 1.1-0.9 2l-1.6 1.7q-0.9 0.8-2.1 0.8-1.2 0-2-0.8l-6.5-6.6v15.7q0 1.2-0.9 1.9t-2 0.7h-2.9q-1.1 0-2-0.7t-0.8-1.9v-15.7l-6.6 6.6q-0.8 0.8-2 0.8t-2-0.8l-1.7-1.7q-0.8-0.9-0.8-2 0-1.2 0.8-2.1l14.6-14.5q0.7-0.8 2-0.8 1.2 0 2 0.8l14.5 14.5q0.9 0.9 0.9 2.1z"/></g>
        </Icon>
    )

    export default FaArrowUp

我导入图标的渲染方法有

 <button name='up' onClick={this.move}> <FaArrowUp /> </button>

Answer 1

如果您在点击处理程序中使用数据属性（例如 e.currentTarget.dataset.something），请使用 e.currentTarget 而不是 e.target。

event.target 是导致该事件的嵌套最深的元素。

event.currentTarget 是侦听事件的元素（事件侦听器附加到的位置）。

Answer 2

老问题，但我在这里也遇到了同样的问题。不太清楚为什么，但图标不喜欢放在设置为相对的 div 中。

从父 div 中删除 position: relative 为我修复了它。

我确实需要它，所以我将它们都包装在另一个 div 中并将其设置为相对。有趣的是，它并没有那么在意。奇怪，但希望这对某人有所帮助。

可能会使用更多信息更新此答案。

Answer 3

在 github 上检查包后，我想你应该试试这个：

 <button name='up' onClick={this.move}> <FaArrowUp onClick={() => this.move}> /> </button>