Невозможно переключить класс на кнопку в React.js

Question

Я хочу сделать анимацию движения для button с помощью переключения классов, как в this example. По некоторым причинам мой код не работает: он вызывает обработчик кликов, но не влияет на классы.

Там же код (я использую React, и имена классов 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, потому что оно будет заменено на случайную строку. Чтобы ответить на ваш вопрос, вам нужно использовать styles.transform и styles.transform-active в вашем jquery.

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

css-modules преобразует ваши имена классов следующим образом.

Надеется, что это помогает!