reactjs - Hur man gömmer en knapp vid utskrift med react och styled components?

Jag vill dölja utskriftsknappen när man klickar på utskriftsknappen på sidan. I princip dölja utskriftsknappen på webbsidan när utskriften börjar.

nedan är min kod,

const printItems = () => {
    window.print();
}

function ItemsTable() {
    return(
        <>
            <TableCell>
                <span>first</span>
            </TableCell>
            <PrintCell>
                <CircleIconButton
                    name="print"
                    onClick={printItems}
                >
            </PrintCell>
        </>
    ); 
}

const TableCell = styled.div`
    display: flex;
    flex-direction: row;
`;

const PrintCell = styled(TableCell)`
    width: 100px;
    justify-content: flex-end;
`;

const CircleIconButton = styled(IconButton)`
    border-radius: 15px;
    background: none;
    width: 32px;
    height: 32px;
`;

Nu vill jag dölja PrintCell när användaren klickar på CircleIconButton. Hur kan jag göra det med CSS och media print.

kan någon hjälpa mig med detta? tack.

Svar #1

Du har olika lösningar:

Villkorlig rendering

function ItemsTable() {
  const [isPrinting, setIsPrinting] = useState(false);

  const printItems = () => {
    setIsPrinting(true);
    window.print();
  };

  return (
    <>
      {!isPrinting && (
        <PrintCell>
          <CircleIconButton name="print" onClick={printItems} />
        </PrintCell>
      )}
    </>
  );

Använda CSS-variabel

function ItemsTable() {
  const [isPrinting, setIsPrinting] = useState(false);

  const printItems = () => {
    setIsPrinting(true);
    window.print();
  };

  return (
    <>
      <PrintCell isVisible={isPrinting}>
        <CircleIconButton name="print" onClick={printItems} />
      </PrintCell>
    </>
  );
}

// Or any other css prop like `visible`
const PrintCell = styled(TableCell)`
    display: ${props => props.isVisible ? 'block' : 'none'}
`;

Använder Ref

function ItemsTable() {
  const printRef = useRef();

  const printItems = () => {
    printRef.current.style.display = 'none';
    window.print();
  };

  return (
    <>
      <PrintCell ref={printRef}>
        <CircleIconButton name="print" onClick={printItems} />
      </PrintCell>
    </>
  );
}

Använda Media Query

const Container = styled.div`
  @media print {
    ${PrintCell} {
      display: none;
    }
  }
`;

const PrintCell = styled(TableCell)`
    width: 100px;
    justify-content: flex-end;
`;

<Container>
  <PrintCell>
    <CircleIconButton name="print" onClick={printItems} />
  </PrintCell>
</Container>

Det finns inget "rekommenderat sätt", välj det som passar dig, det beror på situationen.

Svar #2

Du kan använda CSS media query för att åtgärda problemet med @media print, till exempel om din knappklass heter print_btn kan du ange

@media print{
.print_btn{
display:none;
}
}