Question

我使用反应打印来打印组件。这是可行的，但是我有一些问题：

1。。当用户单击其他组件中的按钮时如何打印组件？我尝试了这个，但是不起作用：

    import ReactToPrint from 'react-to-print';
    class ReportPage extends Component {
     constructor(props) {
      super(props);
      this.state = {      
       isPrint: false
      };
     ...
     }
    ...

    printTable() {
     this.setState({ isPrint: true });
    }

    render() {
     return (
      <div>
       <ReactToPrint
        trigger={() => this.state.isPrint === true}
        content={() => this.componentRef}
       />
       <main>
        ...
        <ComponentToPrint ref={el => (this.componentRef = el)} />
       </main>
       <Footer handlePrintTable={this.printTable}/>
     </div>
     );
     }
    }

脚

class Footer extends Component {
  ...
  render() {
    return (
      <footer className='footer'>
        ...
         <a className='btn btn-raised btn_white btn_icon-action btn_icon-action_print' href='#' role='button'
          onClick={this.props.handlePrintTable}
         >
          PRINT
         </a>
      ...
     </footer>
   );
  }
}

2。。为什么表格标题（来自我打印的组件）变成白色？其实是灰色的 and looks like this

CSS

& .table {
    &__thead {
        & .table {
            &__th {
                vertical-align: middle;
                text-align: center;
                color: #fff;
                background-color: #6c757d;
                .selected{ background: blue;}
            }
        }
    }
}

Answer 1

在页脚中使用handle click方法：

第1步：onClick={this.handleClick}
第2步：

使用以下代码：

 handleClick(){
    this.props.handlePrintTable(true);
}

第3步：

现在在ReportPage中：

printTable(value) {
     this.setState({ isPrint: value });
    }

如何正确打印React组件？

1 个答案: