javascript - 无法在 React.js 中为按钮切换类

Question

我想像 this example 一样使用类切换为 button 制作移动动画.由于某些原因，我的代码被破坏:它调用点击处理程序，但不影响类。

这是代码(我使用 React、Classnames 和 Webpack):

index.jsx:

import React from "react";
import styles from "./index.css";
import classnames from "classnames";

export default class PlaylistButton extends React.Component {
  onClick() {
    alert("clicked");
    $('.transform').toggleClass('transform-active');
  }

  render() {
    return (
        <button className = {classnames(styles.button, styles.transform)} onClick = {() => this.onClick()}>label</button>
    );
  }
}

index.css:

.button {
  font-size: 30px;
  color: white;
  background-color: #5266ed;
  margin-bottom: 5px;
  border: none;
  width: 300px;
  height: 75px;
}

.transform {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}

.transform-active {
  margin-left: -200px;
}

怎么了？

Answer 1

css-modules 将在运行时用随机字符串替换您的类名。因此，您期望的 styles.transform 类名不会是 transform，因为它将被替换为随机字符串。要回答您的问题，您需要在 jquery 中使用 styles.transform 和 styles.transform-active。

onClick() {
    alert("clicked");
    $('.'+ styles.transform ).toggleClass(styles.transform-active);
  }

css-modules 将按如下方式转换您的类名。

希望这对您有所帮助!