Остановить одновременное изменение значка в пользовательском интерфейсе материала

Question

У меня есть список значков в таблице, и когда по значку щелкают, весь список значков меняется на другой значок. Как мне остановить их одновременное изменение?

Код:

import React from 'react';
import {makeStyles, Theme} 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 TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import FilterListIcon from '@material-ui/icons/FilterList';
import FavoriteBorderOutlinedIcon from '@material-ui/icons/FavoriteBorderOutlined';
import FavoriteOutlinedIcon from '@material-ui/icons/FavoriteOutlined';
...

export default function Table() {
    ...
        const [isFavorite, setIsFavorite] = React.useState(false);
    ...
    return (
        ...
                                    return (
                                        <TableRow
                                            hover
                                            tabIndex={-1}
                                            key={row.name}>
                                            <TableCell>{row.name}</TableCell>
                                            ...
                                            <TableCell>
                                                    <IconButton onClick={() => setIsFavorite(!isFavorite)}>
                                                        {isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  <FavoriteBorderOutlinedIcon color="action"/> }
                                                    </IconButton>
                                            </TableCell>
                                               ...
    );
}

Answer 1

Ваше состояние isFavorite переключается при каждом щелчке. Чтобы получить желаемую функциональность, вам понадобится любимое свойство для объекта значка. Вот пример:

const [iconData, setIconData] = useState([
  {icon: someIcon, id: 1, isFavorite: false},
  {icon: diffIcon, id: 2, isFavorite: false},
  {icon: thirdIcon, id: 3, isFavorite: false}
])

В операторе return вы захотите отобразить iconData

iconData.map(icon => (
<TableCell key={icon.id}>
    <IconButton onClick={() => iconFavChange(icon.id)}>
      {icon.isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  
           <FavoriteBorderOutlinedIcon color="action"/> }
     </IconButton>
</TableCell>
))

Обработать изменение значка

const iconFavChange =(id)=> {
 let updatedIconData = iconData.map(icon => icon.id === id ? icon.isFavorite = !icon.isFavorite : icon)
// map over existing state data and if the id in args matches id of icon,
//then toggle the isFavorite property
 setIconData(updatedIconData)
}

Изменить:

1. Данные вашей строки были сохранены в постоянном внешнем компоненте. Я добавил кусочек состояния и установил строку в качестве начального состояния.

const [data, setData] = React.useState(rows);

Я добавил свойство isFavorite в данные вашей строки

isFavorite: boolean;

Добавил любимого обработчика. Он принимает имя как arg, просматривает ваши данные и переключает свойство isFavorite.

const handleFavoriteToggle = name => {
    console.log(name);
    let updatedData = data.map(row => {
      if (row.name === name) {
        row.isFavorite = !row.isFavorite;
      }
      return row;
    });
    setData(updatedData);
  };

Обновлен значок компонента

<IconButton onClick={() => handleFavoriteToggle(row.name)}>
    {row.isFavorite ? (<FavoriteOutlinedIcon color="secondary" />)
                    : (<FavoriteBorderOutlinedIcon color="action" />)}
</IconButton>

Изменен параметр из строки в наш срез данных состояния

<TableBody>
            {stableSort(data, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {