React Icon Click event

Question

I'm using npm react-icons on some buttons.

If you click the button in the corner, outside the icon, it works fine.

    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

Answer 1

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

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

Answer 2

Old question but I also ended up here having the same issue. Not really sure why, but the icons didn't like being inside a div that was set to relative.

Removing the position: relative from the parent div fixed it for me.

I really needed it though, so I wrapped them both in another div and set that to relative. Interestingly, it didn't mind that as much. Strange but hopefully this helps someone.

Will potentially update this answer with any more information.

Answer 3

If you are using data attributes in your click handler (eg e.currentTarget.dataset.something ) use e.currentTarget instead of e.target .

event.target is the most deeply nested element that caused the event.

event.currentTarget is the element that listens to the event (where the event listener is attached to).

Answer 4

如果您使用点击处理程序（例如 event.target.name），请使用 event.currentTarget 而不是 event.target。

"