javascript - 在 ReactJS 中切换类

Question

我试图在单击“关注”按钮时将类名切换为“事件”。我尝试按照 React 网站上的教程和指南以及其他引用资料进行操作，但没有成功。下面是我的代码:

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

您使用事件类渲染 Button。

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

您现在需要做的就是在单击按钮时更新 isFollowing。