使用反应随机更改背景颜色的功能

Question

我正在尝试定义一个函数，当用户单击按钮时，该函数会更改主页的背景颜色。

class App extends Component {
constructor(props) {
super(props);
this.state = { 
quotes: [], 
selectedQuoteIndex: null,
background: 'white'
}   
this.changeBackground = this.changeBackground.bind(this);
}
changeBackground() {
return random(backgroundColor);
}        
render() {
return (
<button onClick={this.changeBackground}/>
)   
}
}

我不知道在哪里放置返回背景颜色。

Answer 1

首先，changeBackground不应该返回任何内容。相反，它应该与一个新的随机生成的backgruondsetState，这是一个代表RGB颜色的十六进制字符串。

changeBackground() {
let background = "#" + ((1<<24)*Math.random() | 0).toString(16);
this.setState({background});
}

然后，您需要使用state.background设置背景样式。在这里，我将div组件作为背景填充整个视口返回。

render() {
return (
<div style={{
width: '100vw',
height: '100vh',
backgroundColor: this.state.background
}}> 
<button onClick={this.changeBackground}/>
</div>
)   
}
}