Javascript 属性addEventListener在react页内为null

我正在使用此代码将其添加到我的react页面

当我单击浏览按钮时，它会重新加载页面，而不是打开文件选择器

我试图补充：

 async function componentDidMount() {
        $("#triggerFile").addEventListener("click", evt => {
          evt.preventDefault();
          $("input[type=file]").click();
        });  ...code continues                                                                                                                                  

异步不起作用。。也试过了

  window.onload=function(){}

这也不行

当我在空白页面中添加代码时，它可以正常工作，但在另一个页面中会出现上述错误

有人能帮我修一下吗

---

谢谢您

这是一个如何在React in中完成的示例

从“React”导入React；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.inputRef=React.createRef（）；
this.onBrowseClick=this.onBrowseClick.bind（this）；
}
componentDidMount（）{
}
onBrowseClick=（）=>{
this.inputRef.current.click（）；
};
render（）{
返回(
浏览
);
}
}
导出默认应用程序；

什么是

$

？jQuery？如果是，那么为什么

.addEventListener（）

？@Andreas这不是我的代码。我只想将它添加到我的react页面。是的，我确实认为它的jquery不应该混合直接DOM访问和react组件。如果确实需要在React中访问DOM，则应该使用refs@Keith你会如何修复这个代码使其在react中工作，你能帮忙吗？奇怪的是，它在空白页中工作，但是当复制粘贴代码到另一个react页面时..不我不想打开任何输入文件..我想在另一个页面中运行上述代码..它在空白页面中工作问题在于它与其他代码一起使用时..请查看问题以react方式执行，而不是使用jQuery。