使用JS更改按鈕單擊時的背景顏色

Question

我想在單擊按鈕時更改背景但是當我單擊按鈕時 state 是空的，因為我無法更改背景顏色

import React,{Component} from "react" 
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple']

class ChangeBagroundColour extends Component {
state= {
    colour:""
}

handleColour= e => {
    var random = colors[Math.floor(colors.length*Math.random())]
    this.setState({colors:random})
    console.log( this.state.colour,random)
}
render() {
return(
  <div>
      <div>
    <b>Project 1:change baground colour</b>
      </div>

      <div style={{backgroundColor:this.state.colour}}>

        <button  onClick={this.handleColour}>Click me</button>
      </div>
  </div>
)
}
}

export default ChangeBagroundColour

Answer 1

看起來在你的 setState 中你有 colors 而不是顏色。

this.setState({colour:random})

Answer 2

這里的問題是在 setState 你給出了錯誤的 state 變量名。 它應該是

this.setState({colour:random})