选中一个后，在所有 TableRow 元素上显示复选框答案

【问题标题】：Show Checkboxes on all TableRow elements once one is checked选中一个后，在所有 TableRow 元素上显示复选框
【发布时间】：2020-09-13 08:59:58
【问题描述】：

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

Checkboxes 最初都是隐藏的。 - 完成
当悬停在一行上时，会出现其复选框。完成
一旦检查了一个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
};

【问题讨论】：

stackoverflow.com/q/36889100/463206
这并不能真正解决我的问题，它只处理一行。我希望在至少其中一个被选中后保持所有行上的复选框可见
FWIW，每当我有复选框要同步操作时，我都会创建一个对象，其中包含一组复选框引用以及所有更改集体状态的方法。确实有助于控制和管理整体 JS 复杂性。

标签： javascript css reactjs checkbox material-ui

【解决方案1】：

在您的Checkbox 中有一个值和一个 onChange。维护一个代表选定复选框的状态，并在onChange 上更新它。检查 checkboxes 数组并仅在选中任何一个复选框时附加 styles.rowSelectionCheckboxStyle 类。

Working copy of your code is here

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>
            );
          })}
...

【讨论】：