Javascript 无法清除背景图像以显示背景颜色

我正在尝试创建一个应用程序，用户可以在图像或背景色上添加文本。一切正常，但当图像在画布中，我想将图像更改为背景色时，我无法清除背景图像，以便在其上显示背景色和文本

这正是我所期望的，我可以使用香草javascript，但不能使用reactjs

这是我的代码

class ImageBoard extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      canvas: undefined,
      selected: undefined,
      textVisible: false
    };
  }

  componentDidMount() {
    const canvas = new fabric.Canvas(this.canvasEl);
    canvas.on("object:selected", e => this.setState({ selected: e.target }));
    canvas.on("selection:cleared", e => this.setState({ selected: undefined }));
    this.setState({ canvas: canvas });
    this.setCanvasBackground(this.props.getSelectedImage.selectedImage, canvas);
  }

  componentWillReceiveProps(nextProps, nextState) {
    if (nextProps.getSelectedColor.hex) {
      this.setCanvasBackgroundColor(
        nextProps.getSelectedColor.hex,
        this.state.canvas
      );
    }
    if (nextProps.getSelectedImage.selectedImage) {
      this.setCanvasBackground(
        nextProps.getSelectedImage.selectedImage,
        this.state.canvas
      );
    }
  }

  setCanvasBackground = (image, canvas) => {
    canvas.setBackgroundImage(image, e => {
      canvas.renderAll();
    });
  };

  setCanvasBackgroundColor = (color, canvas) => {
    canvas.backgroundImage = 0;
    const rgbColor = new fabric.Color(color).toRgb();
    canvas.setBackgroundColor(rgbColor.toString(), () => canvas.renderAll());
  };

  render() {
    return (
      <div className="image-board">
              <canvas
                id="canvas"
                ref={el => {
                  this.canvasEl = el;
                }}
                width={500}
                height={400}
                className="z-depth-1"
              />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    getSelectedImage: state.getSelectedImage,
    getSelectedColor: state.getSelectedColor
  };
};

export default connect(mapStateToProps)(ImageBoard);

class ImageBoard扩展了React.PureComponent{
构造函数（）{
超级（）；
此.state={
画布：未定义，
已选择：未定义，
textVisible:false
};
}
componentDidMount（）{
const canvas=newfabric.canvas（this.canvasEl）；
on（“object:selected”，e=>this.setState（{selected:e.target}））；
on（“selection:cleared”，e=>this.setState（{selected:undefined}））；
this.setState（{canvas:canvas}）；
this.setCanvasBackground（this.props.getSelectedImage.selectedImage，画布）；
}
组件将接收道具（下一步、下一步状态）{
if（nextrops.getSelectedColor.hex）{
此.setCanvasBackgroundColor(
nextProps.getSelectedColor.hex，
这个是.state.canvas
);
}
如果（nextrops.getSelectedImage.selectedImage）{
这是我的背景(
nextrops.getSelectedImage.selectedImage，
这个是.state.canvas
);
}
}
setCanvasBackground=（图像，画布）=>{
canvas.setBackgroundImage（图像，e=>{
canvas.renderAll（）；
});
};
setCanvasBackgroundColor=（颜色，画布）=>{
canvas.backgroundImage=0；
const rgbColor=new fabric.Color（Color）.toRgb（）；
setBackgroundColor（rgbColor.toString（），（）=>canvas.renderAll（））；
};
render（）{
返回(
{
this.canvasEl=el；
}}
宽度={500}
高度={400}
className=“z-depth-1”
/>
);
}
}
常量mapStateToProps=状态=>{
返回{
getSelectedImage:state.getSelectedImage，
getSelectedColor:state.getSelectedColor
};
};
导出默认连接（MapStateTops）（图像板）；

您应该使用

ref

来更新画布，而不是您在

中保存的内容。声明
@ChaseDeAnda首先感谢您的回复。您的意思是说，
this.canvasEl.on（“object:selected”，e=>this.setState（{selected:e.target}））
this.setCanvasBackground（this.props.getSelectedImage.selectedImage，this.canvasEl）