Блог

Как я могу поместить два цветных фона в две разные строки?

Мне удалось настроить его в строке перед щелчком по строке таблицы, и я хотел бы поместить второй фоновый цвет в другую строку при выполнении условия

 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: {
    "amp;$selected, amp;$selected:hover": {
      backgroundColor: "#E8E8E8"
    }
  },
  hover: {},
  selected: {}
});

function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, 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, 24, 6.0), createData("Cupcake", 305, 3.7, 67, 4.3), createData("Gingerbread", 356, 16.0, 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">Fatamp;nbsp;(g)</TableCell>
            <TableCell align="right">Carbsamp;nbsp;(g)</TableCell>
            <TableCell align="right">Proteinamp;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