Попытка изменить фон, обновив состояние в Reactjs
Итак, я пишу приложение, в котором есть несколько игр. Я хочу, чтобы пользователь мог нажать кнопку, и игра появилась на экране, а фон изменил цвет. Я хочу управлять этим с помощью состояния, чтобы изменился фон всего приложения, а не только игрового компонента.
С моим нынешним кодом состояние меняется, когда игра выходит, но страница не обновляется. Любой совет?
так выглядит мое состояние
state = {
madLibsOut: false,
ticTacOut: false,
pigLatinOut: false,
background: "green",
}
вот пример моей попытки изменить это. Состояние меняется, и игра появляется на экране, но цвет фона не обновляется.
handleClickTicTacToe = () => {
const out = this.state.ticTacOut
const newColor = 'red'
this.setState({ ticTacOut: true, background: newColor })
}
на всякий случай, вот как я задаю стиль:
appStyle = {
backgroundColor: this.state.background,
height: "100vh",
width: "100%",
}
render() {
return (
<div className = "App" style = {this.appStyle}>
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны исключить весь объект appStyle внутри состояния вашего компонента.
Примерно так должно работать:
state = {
madLibsOut: false,
ticTacOut: false,
pigLatinOut: false,
appStyle:{
backgroundColor: "green",
height: "100vh",
width: "100%",
}
}
handleClickTicTacToe = () => {
const out = this.state.ticTacOut
let appStyle = this.state.appStyle
appStyle.backgroundColor = 'red'
this.setState({ticTacOut: true, appStyle:appStyle})
}
render() {
return (
<div className = "App" style = {this.state.appStyle}>
попробуйте объявить appStyle с let вместо const
Сделайте appStyle функцией, которая возвращает объект стиля в зависимости от вашего состояния.
appStyle = () => {
return {
backgroundColor:this.state.backgroundColor
}
}
Ваша проблема в том, что вы устанавливаете свое состояние как переменная класса, и оно получает экземпляр однажды, а значение никогда изменится.
Предполагая, что у вас включен ES6. Вы должны сделать что-то похожее на то, что сказал @Allessandro Messori. Но в его решении нецелесообразно изменять свойство объекта и устанавливать состояние.
При установке состояния обычно следует создать новый объект для установки состояния. В этом случае вашим стилевым объектом должен быть новый объект.
state = {
madLibsOut: false,
ticTacOut: false,
pigLatinOut: false,
appStyle: {
backgroundColor: "green",
height: "100vh",
width: "100%",
}
}
handleClickTicTacToe = () => {
const out = this.state.ticTacOut
// Use Object.assign(this.state.appStyle, { backgroundColor: 'red' }); if no ES6 enabled
const newStyle = { ...this.state.appStyle, backgroundColor: 'red' };
this.setState({ ticTacOut: true, appStyle: newStyle })
}
render() {
return (
<div className = "App" style = {this.state.appStyle}>
Другой вариант - создать функцию, которая возвращает ваш стиль, который всегда будет обновляться в зависимости от вашего состояния. Предполагая, что ваш исходный код, вы можете обновить свой код до этого.
getAppStyle = () => {
return {
backgroundColor: this.state.background,
height: "100vh",
width: "100%",
};
}
render() {
const style = this.getAppStyle();
return (
<div className = "App" style = {style}>
«Я внес эти изменения и получил сообщение об ошибке« TypeError: Невозможно назначить только для чтения свойство «backgroundColor» объекта «# <Object>». Кажется, он без ума от строки, в которой написано appStyle.backgroundColor = 'red'