React：在 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>

因此，当单击“打印”时，我想将打印模式更改为 true，因此它会重新呈现 dom，然后打印新的 dom，然后在显示打印预览时，以及然后我再次将 printMode 设置为 false。

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

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

我想保留 DetailedSummaryContainer 标签的原因是我想应用样式。否则我会在 PrintableArea 添加一个 ref 并执行此操作：

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

我想在 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

Answer 2

根据我的评论：

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

React：在 setstate 不起作用后调用 window.print

React: Calling window.print after setstate doesn't work

printing

styles

setstate

reactjs