仅在两行上放置两个backgroundcolor

如何解决仅在两行上放置两个backgroundcolor

如何将两种颜色的背景放在两条不同的线上？

在单击表格行之前，我设法将其设置为一行，并且当满足条件时，我想在另一行上放置第二种背景色

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import {TableBody,Table,TableCell,TableContainer,TableHead,TableRow,Paper} from "@material-ui/core";
import { useState } from "react";

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },tableRow: {
    "&$selected,&$selected:hover": {
      backgroundColor: "#E8E8E8"
    }
  },hover: {},selected: {}
});

function createData(name,calories,fat,carbs,protein) { return { name,protein }; }    
const rows = [ createData("Frozen yoghurt",159,6.0,24,4.0),createData("Ice cream sandwich",237,9.0,37,4.3),createData("Eclair",262,16.0,6.0),createData("Cupcake",305,3.7,67,createData("Gingerbread",356,49,3.9) ];

export default function SimpleTable() {
  const classes = useStyles();

  const [selectedIndex,setSelectedIndex] = useState(null);
  const val = false;
  const secondRow = 0;

  const selectRow = (i) => {
    setSelectedIndex(i);
    if (val) {
      // put a backgroundcolor on line 1
    }
  };

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row,index) => (
            <TableRow hover key={row.name} onClick={() => {selectRow(index);}} selected=selectedIndex === index} classes={{ hover: classes.hover,selected: classes.selected }}              className={classes.tableRow} >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

https://codesandbox.io/s/material-demo-forked-5u4jz?file=/demo.js

解决方法

您可以分配一个数组作为您的状态，使其包含所选索引。在下面的示例中，我在阵列上使用了shift来保留最新的选择，删除最旧的选择，然后推送新的选择。

const [selectedIndex,setSelectedIndex] = useState([]);

const selectRow = (i) => {
    // checks to see if it's already selected
    if (selectedIndex.includes(i)) {
        return;
    }

    let newSelected = [...selectedIndex];

    // sample logic for the "only 2 rows selected" requirement
    if (newSelected.length === 2) {
        newSelected.shift();
        newSelected.push(i);
    } else {
        newSelected.push(i);
    }

    setSelectedIndex(newSelected);
};

<TableRow
    onClick={() => {
        selectRow(index);
    }}
    selected={selectedIndex.includes(index)}
>

https://codesandbox.io/s/material-demo-forked-h5i77?file=/demo.js