React.jsのボタンのクラスを切り替えることができません

Question

のように、クラス切り替えを使用してbuttonの移動アニメーションを作成したいと思います。何らかの理由で私のコードが壊れています：クリックハンドラを呼び出しますが、クラスには影響しません。 （私が反応使用し、クラス名と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は、以下のようにクラス名を変換します。

は、この情報がお役に立てば幸い！