Как запустить анимацию onClick и onHover CSS с помощью ReactJS? - PullRequest
Новая
       14

Как запустить анимацию onClick и onHover CSS с помощью ReactJS?

0 голосов
/ 23 марта 2019

Как я могу активировать CSS-анимации onClick и onHover для компонента кнопки ReactJS, расположенного ниже?

Я пытался использовать ref = {input => (this.inputElement = input)}, но только нажал кнопку, без анимации. 

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

Мне это нужно, чтобы я мог запускать обе анимации из события клавиатуры.

1 Ответ

3 голосов
/ 23 марта 2019

Обычно onClick работает при нажатии кнопки с помощью мыши или клавиатуры (клавиша Enter или пробел).

При наведении курсора на кнопку браузер отправляет onMouseOver и если вы фокусируете кнопку с помощью клавиатуры, браузер отправляет onFocus .

Это очень распространенная практика для стиля : hover и :Фокус стили вместе.Чтобы добавить CSS-анимацию к кнопкам, просто передайте : focus , как показано ниже: 

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

}

Однако, если вы хотите добавить JS-анимацию к компоненту, передайте onFocus опора для кнопки.Вам может помочь следующее: 

          <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>
...