Reactjs 如何在点击时为 react.js 组件设置动画并检测动画的结束

class ClickMe extends React.Component {
  constructor(props) {
    super(props)
    this.state = { fade: false }
  }
  render() {
    const fade = this.state.fade

    return (
      <button
        ref='button'
        onClick={() => this.setState({ fade: true })}
        onAnimationEnd={() => this.setState({ fade: false })}
        className={fade ? 'fade' : ''}>
        Click me!
      </button>
    )
  }
}

Reactjs相关问答推荐

从另一个组件更改组件中const的状态

URL参数和React路由中的点

Next.js：提交表单时状态尚未就绪

NextJS如何正确保存添加到购物车中的产品会话

Google Firestore无法读取图像-react

悬停轴时重新绘制自定义参照线

useEffect firebase 清理功能如何工作？

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能？

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

如何在一个 Next.js 项目中使用两种布局？

无法使axiosmockadapter正常工作

React Native 背景动画反转

Redux Toolkit 配置，是否适用于全栈应用程序？

react - 警告：列表中的每个子元素都应该有一个独特的 keys props ，即使我已经设置了 keys

如何在react 中正确销毁上下文？

需要在窗口调整大小时更新 React 组件

如何通过 id 从 useSprings 数组中删除元素

React Router 6.4CreateBrowserRouter子元素不显示

ClearInterval 在 React 中的 useRef 没有按预期工作

Context Api React 的问题