Я начал использовать 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.
if { ... }
не является допустимым кодом JavaScript, ноif ( ... )
- допустимым. - person E_net4 the curator   schedule 21.07.2017if (this.state.visible === 'none')
вы используете assign вместо сравнения - person grgmo   schedule 21.07.2017if (this.state.visible === 'none') {this.setState({visible: 'block'})}
- person Finbarr O'B   schedule 21.07.2017(this.state.visible === 'none')
. Я действительно не знаю, что можно сделать с этим вопросом, если основные проблемы синтаксические. - person E_net4 the curator   schedule 21.07.2017