Переключить классы в ReactJS

Question

Я пытаюсь переключить className на «active» при нажатии кнопки «Follow». Я пробовал следовать инструкциям и руководствам на сайте реагирования и другим ссылкам, но не повезло. Ниже приведен мой код:

import React from 'react'; 
import styles from './Cover.css'; 
import withStyles from '../../decorators/withStyles'; 
import Link from '../../utils/Link'; 
import Avatar from './Avatar'; 

import { Button } from 'react-bootstrap'; 

@withStyles(styles) 
class Cover extends React.Component { 


    render() { 
    return (
     <div className="Cover"> 
     <div className="Cover-container"> 
      <div> 
      <Avatar 
       username="hilarl" 
       profession="Web Developer" 
       location="New York, New York" 
       status="I am here to protect my business, a bunch of kids are out to ruin me" /> 
       <div className="Cover-submenu-container"> 
       <div className="Cover-submenu-section"> 
        . 
       </div> 
       <div className="Cover-submenu-section links"> 
        <a href="#" className="Cover-submenu-link"> 
        <i className="fa fa-twitter"></i> 
        </a> 
        <a href="#" className="Cover-submenu-link"> 
        <i className="fa fa-facebook"></i> 
        </a> 
       </div> 

       // follow button 

       <div className="Cover-submenu-section connect-menu"> 
        <Button className="follow-btn" href="#">Follow</Button> 
       </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Cover; 

Было бы здорово, если бы кто-то мог помочь в этом. Спасибо

Answer 1

Вы оказываете кнопку с активным классом.

render() { 
    let isFollowing = this.state.isFollowing 
    ... 
     <Button className={`follow-btn ${isFollowing? ' active':''}`} ... 

все, что вам нужно сделать, это обновить isFollowing при нажатии кнопки.