尝试通过更新 Reactjs 中的状态来更改背景

Question

所以我正在编写一个应用程序，上面有几个游戏。我希望用户能够单击一个按钮，然后游戏出现在屏幕上，并且背景会改变颜色。我想控制这个使用状态，以便整个应用程序的背景发生变化，而不仅仅是游戏组件。

按照我现在的代码，游戏结束时状态会改变，但页面不会更新。有什么建议吗？

这就是我的状态

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}>

谢谢！

Answer 1

您应该在组件状态中取出所有 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}>

Answer 2

使 appStyle 成为 returns 基于您的状态的样式对象的函数。

appStyle = () => {
    return {
        backgroundColor:this.state.backgroundColor
    }
}

Answer 3

您的问题是您将状态设置为 class 变量 并且它被实例化一次和值永远不会改变。

假设您启用了 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}>

另一种选择是创建一个函数，returns 您的样式将始终根据您的状态进行更新。假设你的原始代码你可以更新你的代码。

getAppStyle = () => {
  return {
    backgroundColor: this.state.background,
    height: "100vh",
    width: "100%",
  };
}

render() {
  const style = this.getAppStyle();
  return (
    <div className="App" style={style}>

尝试通过更新 Reactjs 中的状态来更改背景

Trying to change background by updating state in Reactjs

javascript

css

background

styling

reactjs