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>
  );
};
posted @ 2023-08-28 09:22  ZerlinM  阅读(351)  评论(0编辑  收藏  举报