- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我几天前开始使用 Semantic UI,最近遇到了一个尚未找到答案的问题。如何在 if 条件下处理类的状态值?
我在这里想做的是制作一个侧边菜单,仅当用户单击按钮时才会显示,并在用户单击显示菜单之外时隐藏。类似于 Semantic 的侧边栏,但没有整个 .pusher 组件。
所以基本上我需要一个 if 条件来检查“可见”状态值,如果它等于“无”,则将其更改为“阻止”(启用显示),反之亦然。到目前为止我编码如下:
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.
最佳答案
有效的 JS 语法的答案是:
if (this.state.visible === 'none') {
this.setState({visible: 'block'});
}
关于javascript - 在 React JS 中处理 If 条件中的状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45232761/
我有一个帮助程序类,它提供有关登录用户的信息。我想将它作为静态方法并在多个地方使用它(不是 react 组件) 如何访问类模型中的 redux 存储值? 最佳答案 如果您可以在应用程序中管理它,那么使
我正在构建一个简单的 rgba 选择器,它允许用户通过向上箭头和向下箭头键切换各个值。下面是我的代码片段。 class App extends Component { constructor(){
想象一下这段代码: class App extends React.Component { state = { name: "george", counter: 1 };
我正在使用 PHP SDK getLoginUrl() 函数,它可以完美地让用户登录。一旦用户被重定向回我的页面,URL 可以有两种形式,请参见以下链接第 3 小节:http://developers
我正在尝试对我的 ReactJS 组件进行单元测试。基本上它是一个由输入和按钮组成的简单组件。单击按钮时,它会触发一个名为“onSave”的事件,并且仅当 state.textValue 不为空时才会
我试图通过将成员变量保存在 ViewState 中(只有几个小变量)来保留它们,但是我读了一下,我发现在 PreRender 阶段将它们保存到 ViewState 中比 PageLoad 更好? 我可
我正在尝试根据用户的输入更改 div 背景颜色。我想将状态键设置为色调,值为用户输入。然后我想获取该状态并将其注入(inject)另一个名为颜色值的状态键。我希望颜色值是在 chromajs 中使用
研究应该是对数据库的简单调用。选择与当前用户对应的记录,然后根据检索到的数据执行一些代码。但是,当它尝试查询数据库时,它返回“数据转换失败。[ OLE DB 状态值(如果已知)= 2 ]”。有什么想法
我正在运行以下代码 /*Fetchinch Last CustID from custMaster*/ int ID = 0; try { con.Open(); da = new
我是一名优秀的程序员,十分优秀!