reactjs 点击自定义按钮时,未触发“打印React”

iswrvxsc  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(130)

我有下面的代码来使用React To print,一个打印组件的库:

<ReactToPrint
        trigger={() => 
            <SqIconButton action={(e)=>e} color={"success"}>
                <AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
            </SqIconButton>
        }
        content={() => componentRef.current}
/>

我的自定义按钮SqIconButton如下所示:

export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
    return(
        <Tooltip title={tip}>
            <Button 
            color={color} 
            variant="contained" 
            onClick={action} 
            disableRipple={disableElevation}
            className={`TBButton ${classes}`}
            sx={sxstyle}
            >
                {children}
            </Button>
        </Tooltip>      
    )
}

在 * 触发器 * 的 React To Print 代码示例中,没有任何内容引用按钮上的“onclick”属性,示例通常如下所示:<button>print this</button>,如果我使用这个元素,它实际上是工作的,但是我的自定义按钮不工作,所以我想我必须通过我的action自定义属性传递onclick事件,所以我尝试使用action={(e)=>e},但是当我按下按钮时,按钮什么也不做。

**文档说明了触发器:**返回React组件或元素的函数。我们在返回的组件/元素中注入了一个自定义的onClick属性。因此,不要为触发器返回的根节点提供onClick属性,因为它会被覆盖。 因此,我不知道onclick是否会被覆盖。

vs3odd8k

vs3odd8k1#

最简单的方法是用一个html元素 Package 你的自定义按钮组件,这个html元素具有onClick函数,如下所示:

<ReactToPrint
        trigger={() => 
          <div> // --> or something else
            <SqIconButton action={(e)=>e} color={"success"}>
                <AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
            </SqIconButton>
          </div>
        }
        content={() => componentRef.current}
/>

export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
    return(
      <div> // -> or something else
        <Tooltip title={tip}>
            <Button 
            color={color} 
            variant="contained" 
            onClick={action} 
            disableRipple={disableElevation}
            className={`TBButton ${classes}`}
            sx={sxstyle}
            >
                {children}
            </Button>
        </Tooltip>  
      </div>    
    )
}

相关问题