Переключение имя класса «активный» в reactJS

Question

Я получаю ошибку «TypeError: Не удается прочитать свойство„isFollowing“нуль» для следующего кода:

import React from 'react'; 
import styles from './Cover.css'; 
import withStyles from '../../../../decorators/withStyles'; 
import Link from '../../../../utils/Link'; 
import Avatar from './Avatar'; 
import classnames from 'classnames'; 
import { Button } from 'react-bootstrap'; 

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

    toggleFollow() { 
    this.setState({isFollowing: !this.state.isFollowing}); 
    } 

    render() { 

    var user = this.props.user; 
    var followClass = this.state.isFollowing? 'active': ''; 

    return (
     <div className="Cover"> 
     <div className="Cover-container"> 
      <div> 
      <Avatar 
       username= {user} 
       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> 

       <div className="Cover-submenu-section connect-menu"> 
        <Button className={classnames('follow-btn', {followClass})} href="#" onClick={this.toggleFollow.bind(this)}>Follow</Button> 
        <Button className="connect-btn" href="#" onClick={this.followBtn.bind(this)}>Connect</Button> 
        <Button className="follow-btn" href="#" onClick={this.followBtn.bind(this)}>Follow</Button> 
       </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Cover; 

Я не мог понять, что я делаю неправильно здесь, я совершенно новый, чтобы реагировать. Любая идея кто-нибудь? Большое спасибо.

Answer 1

Первое, что вам нужно сделать, это добавить начальное значение свойства isFollowing. Поскольку вы используете синтаксис ES6, это можно сделать в конструкторе. Просто добавьте этот код перед функцией toggleFollow():

constructor(props) { 
    super(props); 
    this.state = { 
    isFollowing: false 
    } 
} 

Вторая ошибка (на основе комментариев на ваш вопрос) приходит от не имеющих функцию followBtn() определена. Добавьте эту функцию перед визуализацией():

followBtn() { 
    alert('followBtn called'); //change it for whatever you want 
} 

Не забывайте, что при нажатии на обе кнопки (подключение, следовать) теперь приведет к тому же результату, потому что та же функция будет вызываться.