在React JS中处理If条件中的状态值

时间:2017-07-21 08:27:22

标签: javascript reactjs 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.visiblethis.state[visible]有效(它表示[js]':'预期) 。有谁知道解决这个问题?谢谢!

d

1 个答案:

答案 0 :(得分:1)

使用有效的JS语法回答:

if (this.state.visible === 'none') {
  this.setState({visible: 'block'});
}