我还在学习 JS/React，所以很可能我做的完全错了。欢迎任何批评。
我有一个画布，上面有一幅画。我想在按下按钮时多次更改绘图的颜色。要清楚：我想单击按钮多次更改绘图的颜色。
我试过用几种不同的方式来做这件事，但它们主要是两种方式的变体：
当按钮被按下时，它会调用多次更改状态的方法，但 React 只会费心渲染我设置的最后一个状态。（这是有道理的）
使用
setTimeoutfor eachsetState，但它似乎破坏了方法，并且渲染永远不会改变。
这是一个示例代码：
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: "#000000",
}
this.changeColors = this.changeColors.bind(this);
}
changeColors() {
let colors = ["#000000", "#0000FF", "#FF0000", "#00FF00"];
for (let nextColor in colors) {
console.log(`Color now ${colors[nextColor]}`);
// This seems to break it
//setTimeout(function(){ this.setState({color: colors[nextColor]}); }, 3000);
// This only renders last state
this.setState({color: colors[nextColor]});
}
}
render() {
return (
<div className="App">
<h1>Change Colors</h1>
<MyButton changeColor={this.changeColors}/>
<MyCanvas color={this.state}/>
</div>
);
}
}
class MyButton extends React.Component {
render() {
return (
<button
type="button"
className="btn btn-secondary"
onClick={() => this.props.changeColor()}>
Color
</button>
);
}
}
class MyCanvas extends React.Component {
componentDidMount() {
this.drawOnCanvas(this.props.color)
}
componentDidUpdate() {
this.drawOnCanvas(this.props.color)
}
drawOnCanvas(color) {
const ctx = this.refs.canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300)
ctx.fillStyle=color.color;
ctx.fillRect(10, 10, 100, 100);
}
render() {
return (
<canvas id="canvas" ref="canvas" width={300} height={300}/>
);
}
}
export default App;
我做错了什么以及如何通过反应实现多种颜色变化？
