визуализировать компонент при нажатии кнопки React ES6

Question

Я хочу открыть/отобразить/показать компонент при нажатии кнопки. Я пытаюсь сделать это, изменив состояние, но не могу этого сделать.

Я хочу визуализировать компонент при нажатии кнопки. Состояние изменяется, но компонент не отображает.

export default class NewNav extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     date: new Date(), 
     login: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 

    } 

    handleClick(e) { 
    this.state.login = true; 
    } 

    render() { 

    const style = { 
     margin: 12 
    }; 

    return (
     <MuiThemeProvider> 

     <div className="top-bar"> 
      <div className="top-bar-left"> 
      <ul className="menu"> 
       <li> 
       <RaisedButton 
        label="Sign Up" 
        style={style} 
        primary={false} 
        onClick={this.handleClick} 
        labelColor="#FFF" 
        backgroundColor="#00E676"/> 
       </li> 

      </ul> 
      </div> 
      <div className="top-bar-right"> 

      <ul className="menu"> 

       <li> 
       <RaisedButton 
        label="Log In" 
        primary={true} 
        className="btnLogin" 
        backgroundColor="#3AAA35"></RaisedButton> 

       </li> 

       <li> 
       <RaisedButton 
        label="Sign Up" 
        primary={false} 
        labelColor="#FFF" 
        backgroundColor="#00E676"/> 

       </li> 

      </ul> 
      {this.state.login 
       ? <FirstPage/> 
       : null 
} 

      </div> 

     </div> 
     </MuiThemeProvider> 

    ); 
    } 
} 

Answer 1

Не устанавливайте state напрямую, используйте setState метод. В противном случае реакция не знает изменения состояния и не будет повторно отображать компонент.

Таким образом, вместо этого:

handleClick(e) { 
    this.state.login = true; 
    } 

использовать это:

handleClick(e) { 
    this.setState({login: true}); 
    } 

Answer 2

Ваша реализация меняет состояние, не давая Реагировать зная его: по documentation для Вас видеть, что

setState()

Выполняет мелкое слияние nextState в текущее состояние. Это основной метод, который вы используете для запуска UI обновлений от обработчиков событий и обратных вызовов запросов сервера.

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

Вот простое использование объекта:

this.setState({mykey: 'my new value'}); 

Так что в вашем случае вы должны обновить свое состояние, используя что-то вроде этого:

handleClick(e) { 
    this.setState({login: true}); 
}