How to trigger onClick and onHover CSS animation with ReactJS?

Question

How I can trigger the onClick and onHover CSS animations for the bellow ReactJS button component?

I've tried using ref = {input => (this.inputElement = input)}, but only clicked the button, no animation.

          <td>
            {this.state.buttons.slice(0, 4).map(btn => (
              <button
                onClick={() => this.handleClick(btn)}
                key={btn}
                className={this.getBadgeClasses(btn)}
              >
                {btn}
              </button>
            ))}
          </td>

I need this so that I can trigger both animations from a keyboard event.

jsfiddle.net/tkkqx2y2 this can help you to understand how you can solve our problem — Narendra Chouhan
– Narendra Chouhan, Commented Mar 23, 2019 at 5:20

Viktor Yakubiv · Accepted Answer · 2019-03-23 11:24:00Z

Basically, onClick works when you press the button with either mouse or keyboard (Enter or Space key).

When you move cursor over the button, the browser dispatches onMouseOver and if you focus the button using a keyboard, the browser dispatches onFocus.

It's very common practice to style :hover and :focus styles together. To add CSS animation to buttons simply pass :focus to it like below:

.btn-classes:hover,
.btn-classes:focus {

}

However, if you want to add JS animation to the component, pass onFocus prop to button. The following may be helpful to you:

          <td>
            {this.state.buttons.slice(0, 4).map(btn => (
              <button
                onClick={() => this.handleClick(btn)}
                onFocus={() => this.handleFocus(btn)}
                key={btn}
                className={this.getBadgeClasses(btn)}
              >
                {btn}
              </button>
            ))}
          </td>

Collectives™ on Stack Overflow

How to trigger onClick and onHover CSS animation with ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related