Как создать флажок в функции React

Question

Я пытаюсь создать флажок для отображения и скрытия таблицы React с некоторыми данными в ней. Я использовал только классы, и я новичок в использовании функций, и в результате я пытаюсь реализовать способ создания флажка, который может скрывать мою таблицу реагирования или столбец.

import "react-table/react-table.css";
import React, { Component, useState, useEffect } from "react";

function dataquery() {
  return fetch("www.website.com").then(response =>
    response.json()
  );
}

function Offence() {
  const [count, setCount] = useState([]);
  useEffect(() => {
    dataquery().then(headlines => {
      setCount(headlines);
    });
  }, []);
  //event.preventDefault();
  console.log(count.offences);

  let data = [{}];
  if (typeof count.offences !== "undefined" ) {
    let newdata = count.offences.map(count => data.push({ name: count }));
//    console.log("???");
  }
  console.log(typeof count.offence);
  const columns = [
    {
      Header: "Name",
      accessor: "name",

    },

  ];

// trying to hide this react table or just hide the column
  return <ReactTable data={data} columns={columns} filterable />;

}
export default Offence;

Я экспортирую эту функцию в другой файл, в котором я отображаю «Обида». Веб-сайт выборки не является реальным веб-сайтом, так как для его работы требуется личный логин, поэтому для этой цели я заменил его этим заполнителем.

Спасибо.

Answer 1

Я использовал только классы и новичок в использовании функций

В такой ситуации я настоятельно рекомендую использовать materialui компоненты. Это сделало бы вашу жизнь намного проще, потому что вам не нужно больше вдаваться в подробности стиля, если вы этого не хотите. Ниже я примерно набросал компонент, который содержит таблицу и список флажков для переключения столбцов скрытия / отображения. Надеюсь, это поможет:)

import React, { useState, useEffect } from 'react'
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'
import Checkbox from '@material-ui/core/Checkbox';

function App() {
  const [showName, setshowName] = useState(true);
  const [showQty, setshowQty] = useState(true);
  const [showPrice, setshowPrice] = useState(true);

  const dummydata = [{ name: "apple", qty: 12, price: 3.3 }, { name: "orange", qty: 3, price: 1.5 }, { name: "grape", qty: 10, price: 4.3 }]

  return (
    <Grid
      container
      direction="row"
      justify="space-around"
      alignItems="center"
    >
      <Grid item xs={12} sm={5}>
        <Card>
          <Table>
            <TableHead>
              <TableRow>
                {showName ? <TableCell>Name</TableCell> : ""}
                {showQty ? <TableCell >Qty.</TableCell> : ""}
                {showPrice ? <TableCell >Price</TableCell> : ""}
              </TableRow>
            </TableHead>
            <TableBody>
              {dummydata.map(item => (
                <TableRow>
                  {showName ? <TableCell component="th" scope="row" padding="none">
                    {item.name}
                  </TableCell> : ""}
                  {showQty ? <TableCell>{item.qty}</TableCell> : ""}
                  {showPrice ? <TableCell>{item.price}</TableCell> : ""}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      </Grid>
      <Grid item xs={12} sm={5}>
        <Card>
          <CardHeader
            title="Hide any column?"
          />
          <CardContent>
            <FormControl style={{ margin: 4 }}>
              <FormGroup>
                <FormControlLabel
                  control={
                    <Checkbox onChange={(e, checked) => setshowName(checked)} checked={showName} />
                  }
                  label="Hide Name"
                />
                <FormControlLabel
                  control={
                    <Checkbox onChange={(e, checked) => setshowQty(checked)} checked={showQty} />
                  }
                  label="Hide Quantity"
                />
                <FormControlLabel
                  control={
                    <Checkbox onChange={(e, checked) => setshowPrice(checked)} checked={showPrice} />
                  }
                  label="Hide Price"
                />
              </FormGroup>
            </FormControl>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
}

export default App;

Answer 2

Вы можете легко добавить useState ловушку, которая хранит логическое значение, чтобы показать / не показать таблицу. Затем переключите это состояние при смене флажка. Например:

function Offence() {
  // ... your component code

  const [showTable, setShowTable] = useState(true);

  // output
  return (
    <>
      <input
        type="checkbox"
        checked={showTable}
        onChange={() => { setShowTable(p => !p); }}
      />
      {showTable ? <ReactTable ... /> : null}
    </>
  );
}