Javascript ReactJS onClick在Firefox中不起作用，但在Chrome中起作用

我正在尝试使用FabricJS画布创建ReactJS应用程序。为了进行测试，我创建了简单的SVG形状，并将它们添加到画布中。我想把它们下载成.png格式，为此我使用了一个按钮

对于该方法，我使用了arrow函数thing而不是.bind（）

下面的代码是创建png并下载它的部分。它可以在Chrome中使用，但不能在Firefox中使用

import React from 'react';
import {fabric} from 'fabric';
import {Button} from 'react-bootstrap';


class FabricCanvas extends React.Component{

//Code for adding elements to canvas omitted

    saveToCanvas = () => {

        var link = document.createElement("a");
        link.href = this.the_canvas.toDataURL({format: 'png'});
        link.download = "avatar.png";
        link.click();

    }

    render(){

        return (
            <React.Fragment>
                <canvas id='main-canvas'>
                </canvas>
                <Button className='large success' onClick={this.saveToCanvas} >
                    Download
                </Button>
            </React.Fragment>
        );
    }
}

从“React”导入React；
从“fabric”导入{fabric}；
从“react bootstrap”导入{Button}；
类FabricCanvas扩展了React.Component{
//省略了用于向画布添加元素的代码
saveToCanvas=（）=>{
var link=document.createElement（“a”）；
link.href=this.the_canvas.toDataURL（{format:'png'}）；
link.download=“avatar.png”；
link.click（）；
}
render（）{
返回(
下载
);
}
}

您是否收到任何控制台错误？@christophengo无此功能。可能与

toDataURL

在firefox上的工作方式有关。检查：@Jackyef我不明白这些答案如何适用于我的问题。你能解释一下吗？我不是把Database64放在img标签中，而是想下载