我有下面的代码来使用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是否会被覆盖。
1条答案
按热度按时间vs3odd8k1#
最简单的方法是用一个html元素 Package 你的自定义按钮组件,这个html元素具有
onClick
函数,如下所示:或