时间戳

首页 > 解决方案 > 停止在 Material UI 中同时更改图标

javascript - 停止在 Material UI 中同时更改图标

问题描述

我在表格中有一个图标列表，当单击该图标时，整个图标列表更改为另一个图标。我应该如何阻止它们同时改变？

代码：

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

标签： javascriptcssreactjstypescriptmaterial-ui

解决方案

每次点击都会切换您的状态 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);
  1. 我在您的行数据上添加了一个 isFavorite 属性
isFavorite: boolean;
  1. 我添加了一个最喜欢的处理程序。它将名称作为 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);
  };
  1. 更新了图标组件
<IconButton onClick={() => handleFavoriteToggle(row.name)}>
    {row.isFavorite ? (<FavoriteOutlinedIcon color="secondary" />)
                    : (<FavoriteBorderOutlinedIcon color="action" />)}
</IconButton>
  1. 将参数从行更改为我们的状态数据切片
<TableBody>
            {stableSort(data, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {

推荐阅读