選中一個后，在所有 TableRow 元素上顯示復選框

Question

我有一個 material-ui 表，我正在向它添加多選功能。 我的要求如下。

• Checkbox最初都是隱藏的。 -完成
• 當懸停在一行上時，會出現其復選框。 完畢
• 一旦選中了一個Checkbox ，那么其他行上的所有Checkbox元素將始終可見。

我已經完成了前兩個要求，但我正在努力解決最后一個要求。

一旦選中任何一個復選框，如何使所有復選框可見（通過更改opacity ）？

到目前為止，這是我必須要做的：

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  },
  rowSelectionCheckboxStyle: {
    //opacity: "calc(var(--oneRowSelected))",
    opacity: 0,
    "$tableRowStyle:hover &": {
      opacity: 1
    }
  }
});

export default function MyTableComponent(props) {
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <Checkbox className={styles.rowSelectionCheckboxStyle} />
            </TableCell>
            <TableCell>Icon</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.tableRowsData.map(row => {
            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  color:
                    row.icon && row.icon.color
                      ? row.icon.color
                      : DEFAULT_TABLE_ROW_ICON_COLOR
                }}
              />
            );
            return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>
                  <Checkbox className={styles.rowSelectionCheckboxStyle} />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

MyTableComponent.propTypes = {
  tableRowsData: PropTypes.array
};

Answer 1

在Checkbox中有一個值和一個 onChange 。 維護一個代表選定復選框的 state 並在onChange時更新它。 檢查復選框數組，如果選中任何一個復選框，則僅附加 class styles.rowSelectionCheckboxStyle 。

您的代碼的工作副本在這里

export default function MyTableComponent(props) {
  const [checkedRows, setCheckedRows] = useState({});
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";

  const anyChecked = () => {
    let anyRowChecked = false;
    for (let key in checkedRows) {
      if (checkedRows[key]) {
        anyRowChecked = true;
      }
    }
    return anyRowChecked;
  };

  const checked = (checked, index) => {
    setCheckedRows(prev => ({ ...prev, [index]: checked }));
  };

...
...
return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>
                  <Checkbox
                    checked={checkedRows[index]}
                    onChange={e => checked(e.target.checked, index)}
                    className={
                      !anyChecked() && styles.rowSelectionCheckboxStyle
                    }
                  />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>
                  {checkedRows[index] ? "True" : "False"} {row.projectName}
                </TableCell>
              </TableRow>
            );
          })}
...