javascript - 调用打印函数后页面卡住

Question

我正在使用 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 后，在刷新页面之前我无法执行任何其他操作。整个页面都卡住了。

我是不是漏了什么？

Answer 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>
 )
}