Показать / скрыть компонент в React с помощью состояния
Я пытаюсь скрыть / показать компонент при проверке значения состояния:
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;
Я не знаю, где ошибка / неправильный код, но рендер не обновляется.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы неправильно его используете. Вы должны запустить такое состояние
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>
);
В компоненте 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, которую я использовал, является формой средства обновления, просмотрите документацию по реакции для объяснения этого.
Вы не можете объявить this.state как переменную, которая должна возвращать ошибку при компиляции. Как сказал Мурат.
Состояние в react является JS-объектом и объявлено как таковое:
this.state = { ... }
Чтобы изменить (изменить) состояние, вы не можете сделать это напрямую в реакции, иначе реакция не узнает, что оно изменилось. Если бы вы сказали, что ваше состояние:
this.state = {show: true}
а затем хотел изменить логическое значение на false, вы не могли этого сделать, просто выполнив this.state.show = false. React не узнает, что изменение произошло, поэтому вам нужно использовать метод реакции под названием setState(). Как сказал Мурат, вы измените состояние, используя следующий метод onClick: onClick = {() => this.setState({show:false})}.
Вы должны проверить эту страницу документации о состоянии реакции, чтобы узнать больше, это важная часть работы с React.JS.
https://reactjs.org/docs/state-and-lifecycle.html
В статье есть раздел под названием «Правильное использование состояния», где вы можете ознакомиться с ним. :)
Большое спасибо !
Вам необходимо предоставить функцию свойству onClick.
this.state=falseявно не тот. Вам также нужно использовать метод setState, а не устанавливать напрямую. И если вы там, сделайте свое состояние предметом к лучшему.