反应：在 setstate 之后调用 window.print 不起作用

Question

我想通过点击打印页面，但是我不想在页面上打印页眉和按钮：

<DetailedSummaryContainer id="detailedSummaryContainer">
        {!this.state.printMode ?
                <Header className="container">
                <HeaderText>Header Text</HeaderText>                    
                <ButtonContainer>
                    <StyledButton onClick={this.print}>Print</StyledButton>                        
                </ButtonContainer>
            </Header>
            : null
        }            
        <PrintableArea>
            ...
        </PrintableArea>
</DetailedSummaryContainer>

所以当点击打印时，我想将printMode更改为true，所以它重新渲染dom然后打印新的dom，然后当显示打印预览时，我再次将printMode设置为false。

print = () => {
        this.setState({ printMode: true }, () => 
        {
           console.log(this.state.printMode); 
           window.print();
         });
    }

目前我还没有将 printMode 设置为 false。 这段代码发生的情况是状态更改为 true，页面被重新呈现，并且标题和按钮不显示，而是打开了 about:blank 新选项卡而不是打开打印预览。

我想保留DetailedSummaryContainer 标签的原因是我希望应用这些样式。否则我会向PrintableArea 添加一个引用并执行此操作：

print = () => {
        var printContents = this.printComponent.innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;        
        window.print();
        document.body.innerHTML = originalContents;
}

在这种方法中打印效果很好，但样式仅来自PrintableArea，我还需要应用DetailedSummaryContainer 的样式。

如果有更好的方法，我可以采取另一种方法。

Answer 1

根据我的评论：

您可以将参考放在DetailedSummaryContainer 而不是PrintableArea 因为你的 Header 在打印模式下是 null 而不是 innerHTML 的一部分，所以它与你想要的不冲突，你可以保持样式

Answer 2

我想在window.print 之后将printMode 设置回false 正是您想要的。注意window.print会阻止整个javascript进程运行

  click = () => {
    this.setState({ printMode: true }, () => {
      window.print();
      this.setState({ printMode: false })
    });
  }

试试：https://stackblitz.com/edit/react-ywbl1g?embed=1&file=index.js