使用状态显示/隐藏 React 中的组件

Question

我试图在检查状态值时隐藏/显示组件：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'
class App extends Component {
constructor(props) {
super(props);
this.state = true;
}
render() {    
return (
<div className="App">
{this.state && <Button variant="raised" onClick={this.state=false}>Button</Button>}
</div>
);
}
}
export default App;

我不知道错误/错误代码在哪里，但渲染似乎没有刷新。

Answer 1

您用错了。你必须像这样初始化状态

constructor(props) {
super(props);
this.state = {show: true}
}

并像这样渲染

return (
<div className="App">
{this.state.show && <Button variant="raised" onClick={() => this.setState({show:false})}>Button</Button>}
</div>
);

Answer 2

你不能将 this.state 声明为变量，它应该在编译时返回错误。正如穆拉特所说。

react 中的状态是一个 JS 对象，声明如下：

this.state = { ... }

为了改变(改变(状态，你不能直接在 react 中执行此操作，否则 react 将不知道它已经改变了。如果你说声明你的州为：

this.state = {show: true}

然后想把布尔值改成假，你不能简单地做this.state.show = false.React 不会知道更改已经发生，这就是为什么您需要使用名为setState()的 react 方法。正如 Murat 所说，您将使用以下 onClick metod 更改状态：onClick={() => this.setState({show:false})}。

您应该查看有关 react 状态的文档页面以获取更多信息，它是使用 React.JS 的重要组成部分。

https://reactjs.org/docs/state-and-lifecycle.html

文章中有一节标题为"正确使用状态"，请看一下。 :)

Answer 3

在 React 组件中，this.state 应该是表示组件状态的对象。

1( 必须初始化this.state(在构造函数或类体中(

构造函数中的示例：

constructor(props) {
super(props);
this.state = {
showButton: true
};
}

2( 事件处理程序必须是对组件的方法 (this.handleButtonClick( 的引用，并且此方法必须绑定到组件实例：

constructor(props) {
super(props);
this.state = {
showButton: true
};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick(event) {
this.setState(() => ({ showButton: false }));
}
render() {
return (
<div className="App">
{this.state.showButton && <Button variant="raised" onClick={this.handleButtonClick}>Button</Button>}
</div>
);
}

请注意，您没有直接设置状态，而是使用 setState 方法，我使用的 setState 签名是更新程序表单，请查看 react 文档对此进行解释。