Question

我试图创建一个复选框来显示和隐藏我的React Table，其中包含一些数据。我只使用过类，并且对使用Functions是陌生的，因此努力实现一种创建可隐藏我的React Table或列的复选框的方法。

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

您可以轻松添加一个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}
    </>
  );
}

Answer 2

我只使用过类，并且是使用函数的新手

在这种情况下，我强烈建议使用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;

如何在React函数中创建复选框

2 个答案: