首页 > 其他分享 >React加载组件后自动触发某函数,而不需要点击按钮

React加载组件后自动触发某函数,而不需要点击按钮

时间:2023-08-28 09:34:02浏览次数:41  
标签:打印 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>
  );
};

标签:打印,React,点击,按钮,组件,加载
From: https://www.cnblogs.com/ZerlinM/p/17661425.html

相关文章

  • 黑魂242 动作按钮
    在IUserInput脚本里添加一个新的布尔值: 然后在KeyBoardInput脚本里添加这个变量的键位: 在ActorController脚本添加这两行代码: 在下面写一个判断式,当控制键action触发时,唤醒OnAction。 ......
  • flutter中通过遍历一个数组,给每个元素添加一个开关按钮怎么写
    要通过遍历一个数组给每个元素添加一个开关按钮,你可以使用ListView.builder来构建一个包含开关按钮的列表。下面是一个示例,展示了如何遍历一个数组并为每个元素添加一个开关按钮:List<bool>switchValues=List.generate(5,(index)=>false);ListView.builder(itemCount:sw......
  • react hooks中使用promise.all
    useEffect(async()=>{constgetFirstResponse=async()=>{try{returnawaitaxios.get('http://first-api',{params:{carId:id},});}catch(error){returnerror;}};......
  • 如何在一个QWidget中加载一个gif作为背景
    如何在一个QWidget中加载一个gif作为背景思路来源:http://daniel-albuschat.blogspot.com/2009/07/background-animation-for-qt-widgets.html概括为使用QMovie渲染背景,具体示例代码如图......
  • 新版Jadx 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法
    <table><tr><tdbgcolor=orange>本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!</td></tr></table>新版Jadx加载dex报错jadx.plugins.input.dex.DexException:B......
  • react-pdf在部分iOS手机上加载pdf失败问题解决
    最近项目快结束了,测试提了一个bug,iOS手机上加载pdf一直在转圈,加载不出来内容。看到这个bug,在电脑上和安卓手机上没有问题,iOS手机中打开确实又问题,初步确定为app问题。我们的项目是集成在客户的app里的,可能是app内的WebView和Safari有一些差异导致的问题。首先直接在iOS手机上用a......
  • 新版Jadx 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法
    本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!新版Jadx(1.6+)加载dex报错jadx.plugins.input.dex.DexException:Badchecksum解决方法环境win10Jadx1.6......
  • delphi FastReport 保存和加载已准备的报表
    FastReport保存和加载已准备的报表属性和方法TfrxReport.PreviewPagespropertyPreviewPages:TfrxCustomPreviewPages;指向已完成报表的当前页面的链接。它用于与完成的报表相关的所有操作(打印、保存、导出等)。TfrxCustomPreviewPages.LoadFromFilefunctionLoadFromFile......
  • 前端React学习路径
    在当今的软件开发领域,React已经成为一种广泛使用的JavaScript库,用于构建用户界面。它由Facebook开发并维护,具有高效、灵活和可扩展等特点,适用于各种类型的应用程序开发。本文将介绍前端React的学习路径,包括基本概念、核心功能、组件进阶、路由和状态管理、构建实践等方面,并结合代码......
  • 一个支持丰富鼠标和触摸手势的 React 库
    点击上方“蓝字”关注我们吧!哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!UseGesture是一个支持丰富鼠标和触摸手势的React库。UseGesture可以将丰富的鼠标和事件绑定到任何组件或视图。通过接收到的数据,设置手势变得非常简单,而且通常只需要几行代码。安......