如何用ReactJS触发onClick和onHover CSS动画？

Question

如何为bellow ReactJS按钮组件触发onClick和onHover CSS动画？

我试过使用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>

我需要这个，这样我才能从键盘事件中触发这两个动画。

Answer 1

基本上，当您使用鼠标或键盘(Enter或空格键)按下按钮时，onClick会起作用。

当您将光标移动到按钮上时，浏览器将调度onMouseOver；如果您使用键盘聚焦按钮，浏览器将调度onFocus。

将:hover和:focus样式放在一起是很常见的做法。要向按钮添加CSS动画，只需传递:焦点如下：

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

}

但是，如果您想将JS动画添加到组件，请将onFocus prop传递给button。以下内容可能会对您有所帮助：

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