Обработка значения состояния в условии If в React JS

Я начал использовать Semantic UI несколько дней назад и недавно столкнулся с проблемой, на которую еще не нашел ответа. Как вы обрабатываете значение состояния класса в условии if?

Я пытаюсь создать боковое меню, которое будет отображаться только тогда, когда пользователь нажимает кнопку, и скрывается, когда пользователь нажимает кнопку вне отображаемого меню. Что-то вроде боковой панели Semantic, но без целого компонента .pusher.

Так что в основном мне нужно условие if, которое проверяет значение «видимого» состояния, и если оно равно «none», измените его на «block» (включить отображение) или наоборот. Пока я закодировал это:

import React, { Component } from 'react'
import { Input, Label, Menu } from 'semantic-ui-react'

export class SidebarMenuEX extends Component {

constructor(props)
{
    super(props);
    this.state = {activeItem: 'inbox', visible: 'none'};
}

handleItemClick = (e, { name }) => this.setState({ activeItem: name })

handleDisplay(){
if {this.state[visible]} = 'none'
this.setState({visible = 'block'})
}

render() {
const { activeItem } = this.state.activeItem
const { visible } = this.state.visible

return (
  <Menu vertical display = 'none'>
    <Menu.Item name='inbox' active={activeItem === 'inbox'} onClick={this.handleItemClick}>
      <Label color='teal'>1</Label>
      Inbox
    </Menu.Item>

    <Menu.Item name='spam' active={activeItem === 'spam'} onClick={this.handleItemClick}>
      <Label>51</Label>
      Spam
    </Menu.Item>

    <Menu.Item name='updates' active={activeItem === 'updates'} onClick={this.handleItemClick}>
      <Label>1</Label>
      Updates
    </Menu.Item>
    <Menu.Item>
      <Input icon='search' placeholder='Search mail...' />
    </Menu.Item>
  </Menu>
)
}

Очевидно, мой метод handleDisplay () не работает, но я хотел бы понять, почему условие If не распознает this.state.visible или this.state[visible] как действительные (в нем написано [js] ':' ожидалось). Кто-нибудь знает способ решения этой проблемы? Спасибо!

D.


person Diveye    schedule 21.07.2017    source источник
comment
if { ... } не является допустимым кодом JavaScript, но if ( ... ) - допустимым.   -  person E_net4 the curator    schedule 21.07.2017
comment
Действительно, но я все равно получаю сообщение об ошибке при условии if: if (this.state.visible) = 'none'. Знак равенства не распознается как допустимое выражение   -  person Diveye    schedule 21.07.2017
comment
попробуйте if (this.state.visible === 'none') вы используете assign вместо сравнения   -  person grgmo    schedule 21.07.2017
comment
попробуйте if (this.state.visible === 'none') {this.setState({visible: 'block'})}   -  person Finbarr O'B    schedule 21.07.2017
comment
Опять же, это недопустимый JavaScript. Вам нужно что-то вроде (this.state.visible === 'none'). Я действительно не знаю, что можно сделать с этим вопросом, если основные проблемы синтаксические.   -  person E_net4 the curator    schedule 21.07.2017
comment
Это сработало! Извините за беспокойство, я все еще привыкаю реагировать на кодирование js. Спасибо за конструктивный отзыв!   -  person Diveye    schedule 21.07.2017


Ответы (1)


Ответ с допустимым синтаксисом JS:

if (this.state.visible === 'none') {
  this.setState({visible: 'block'});
}
person Finbarr O'B    schedule 21.07.2017