如何自动触发点击事件按钮

Question

我的页面中有一个下载按钮，我想在渲染到此页面时自动触发它，我该怎么做?我读了一些从Stack Overflow到useRef()的答案，但我仍然不太明白如何应用它。

下载功能:

const downloadHandler = async (e) => {
const getNewCategory = async () => {
await axios({
method: "GET",
url: "http://localhost:3001/download",
headers: {
"Content-Type": "application/json"
}
}).then(res => {
setNCategory(res.data)
console.log("res.data: "+JSON.stringify(res.data));
});
}
getNewCategory()
}

按钮:

<div className="field">
<div className="control">
<button type="button" onClick={downloadHandler} className="btn-small">
Download
</button>
</div>
</div>

Answer 1

为按钮添加id

<button id="download" type="button" onClick={downloadHandler} className="btn-small">

然后你可以手动触发点击事件

const downloadButton = document.getElementById('download');
downloadButton.dispatchEvent(new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
}));

在你需要的地方像上面那样调用

下面是使用ref

的方法定义了ref

const downloadButton = useRef(null);

并将其用于或按钮

<button ref={downloadButton} type="button" onClick={downloadHandler} className="btn-small">

然后触发点击事件

downloadButton.current.dispatchEvent(new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
}));