调用打印函数后页面冻结答案

【问题标题】：Page freezes after calling print function调用打印函数后页面冻结
【发布时间】：2019-01-22 11:10:07
【问题描述】：

我正在使用window.print() 函数打印div 的内容，但是当我调用打印函数时整个页面冻结。请看下面的代码：

render(){
  return(
   <div>
    <div className='style' id='divToPrint'>
     <p>Content to print here.</p>
     <p>Content to print here.</p>
     <p>Content to print here.</p>
   </div>
    <button className='someStyle' onClick={() => printDiv('divToPrint')}>Print</button
    <button className='someStyle' onClick={this.somethingElse}>Something Else
</button>
  </div>
 )
}

打印功能：

function printDiv(divName) {
  let printContents = document.getElementById(divName).innerHTML;
  let originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

打印并调用document.body.innerHTML = originalContents 后，在刷新页面之前我无法执行任何其他操作。整个页面都冻结了。

我错过了什么？

【问题讨论】：

我们能解决这个问题吗？因为我遇到了同样的问题。

标签： javascript reactjs

【解决方案1】：

您可以将内容保存在state 或获取它们在props 并显示它们

class MyComponent extends React.Component {
state = {
  content:''
}
printDiv = (content) => {
  this.setState({content})
}
render() {
  const {content} = this.state;
  return (
   <div>
    <p>{content}</p>
    <button className='someStyle' onClick={() => printDiv('divToPrint')}>Print</button>
   </div>
 )
}

【讨论】：