Question

我有一个Home组件，该组件使用map函数呈现contact的数组，每个contact都有自己的打印按钮，应该只打印其联系人。问题在于，当前它会打印整个页面，而不仅是单击打印的contact。

我向isPrinting组件添加了contact状态，默认情况下设置为false，单击打印按钮时将其设置为true，并且当打印对话框已关闭，我将其设置回false。

我怎样才能真正使“打印”按钮仅打印单击了其打印的联系人？

我在handlePrint组件上的contact函数：

  handlePrint = () => {
    this.setState({ isPrinting: true });
    window.print();
    window.onafterprint(
      this.setState({ isPrinting: false })
    );
  };

map组件上的功能：

Home

我正在使用contacts.map(info => ( <SearchResultsPanel info={info} key={info.id} />来控制打印样式。

Answer 1

默认情况下，我会在$('#myTable tr[id*=somesubstring]').remove();上隐藏您显示的每个联系人组件。

然后使用您设置的@media print状态，在要打印的<SearchResultsPanel>组件实例中添加一个CSS类，该类将覆盖影响所有联系人的display: none声明在这种特定情况下。

您可能还想在setState上使用回调，以确保在触发isPrinting之前完成由this.setState({ isPrinting: true });引起的重新渲染。

所以您可以：

window.print()

或者如果您想使用hooks：

handlePrint = () => {
    this.setState({ isPrinting: true }, () => {
        window.print();
        window.onafterprint(
            this.setState({ isPrinting: false })
        );
    });
};

通过地图功能打印渲染的组件之一

1 个答案: