React加载组件后自动触发某函数,而不需要点击按钮
问题
在项目中使用了ReactToPrint来实现打印,但是trigger属性中的按钮需要点击才能执行打印。
期望能在组件加载完成时自动执行打印方法。
解决
可在组件加载完成时,通过id获取组件,并执行该组件的click方法。
代码如下:
import React, { useRef, useEffect } from 'react';
// ...
const PrintLabel = () => {
const componentRef = useRef();
useEffect(() => {
document.getElementById('print-button').click();
});
return (
<div>
<ReactToPrint
trigger={() => <button id="print-button">Print</button>}
content={() => componentRef.current}
/>
<ComponentToPrint ref={componentRef} />
</div>
);
};