Question

我正在执行一项需要通过单击按钮并更改状态来更改组件背景的任务。我不应该使用React Hooks。到目前为止，我已经：

import React from 'react'
import ReactDOM from 'react-dom'

class Main extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const {
      colorChange,
      styles
    } = this.props

    const text = this.props.data
    return (
      <main style={styles}  >
        <h1>welcome</h1>
        <button
          onClick={colorChange}
        >
Change color
        </button>
   
      </main>
    )
  }
}

class App extends React.Component {
  state = {
    styles: { backgroundColor: 'white' },
  }

  colorChange = () => {
    let backgroundColor = 'white'
    let changedColor = 'black'
    let backGround = this.state.styles==='white' ? changedColor : backgroundColor
  this.setState({backGround})}
  render() {

    return (
      <Main      
        colorChange={this.colorChange}
      
      />
    )
  }
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

但是那什么也没做。我在哪里犯错了？

Answer 1

首次通过样式可作为<Main colorChange={this.colorChange} style={this.state.styles} />的主要支持，目前尚未定义。

第二，this.state.styles作为对象，您正在像

进行比较

this.state.styles === "white"

，您应该在对象中使用backgroundColor：

this.state.styles.backgroundColor === "white"

最后一次，当您执行setState({backGround})时，您将创建一个键为backGround的项目（这不是有效的CSS属性），并且也不位于styles标记内。 您的状态最终是这样的：

this.state = {
   backGround: 'black',
   styles: {
     backgroundColor: 'white'
   }
}

所以这样做：

this.setState({
  styles: {
     backgroundColor: backColor
  }
})

我也建议像这样调用colorChange以避免无限重发：

<button onClick={() => colorChange()}>Your Button</button>

Answer 2

我的建议是，您只需使用onColorChange（）函数来添加/删除类。

如果必须将样式作为参数传递，则还可以仅在状态上保存颜色的值（“白色”，“黑色”），并且在将其传递给组件时仅使用该值

如何在react.js中更改组件背景颜色的更改状态？

2 个答案: