单击时如何切换 Material UI 图标答案

【问题标题】：How to switch MaterialUI icon when clicked单击时如何切换 Material UI 图标
【发布时间】：2025-12-01 06:50:02
【问题描述】：

在列表中，每个列表项都有一个“AddIcon”。点击后，我想根据它的“id”将该图标切换为“BlockIcon”

import React from 'react'
import {List, ListItem} from '@material-ui/core'
import AddCircleIcon from '@material-ui/icons/AddCircleOutline'
import BlockIcon from '@material-ui/icons/BlockOutlined'

const * = () => {
    const handleIconClick = (id) => {
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    <AddCircleIcon /> 
                </ListItem>
            </ListItem>
        </List>
    )
}

export default *

单击图标时，我希望 AddIcon 更改为 BlockIcon。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您应该创建一个状态变量来保存 clickec 或未点击您的状态，您可以使用它来交换图标

import React from 'react'
import {List, ListItem} from '@material-ui/core'
import AddCircleIcon from '@material-ui/icons/AddCircleOutline'
import BlockIcon from '@material-ui/icons/BlockOutlined'

const * = () => {
    const [clicked, setClicked] = useState(false)
    const handleIconClick = (id) => {
         setClicked(true)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicked ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default *

我还注意到，由于您使用的是列表，因此您可能希望单击多个项目，如果是这种情况，那么您应该使用下面的表单

const * = () => {
    const [clicks, setClicks] = useState([])
     //add the id to the array of clicked items if it doesn't exist but if it does exist remove it. this makes sure that double clicking on an item brings it back to normal
    const handleIconClick = (id) => {
         let result =  clicks.includes(id)? clicks.filter(click => click != id): [...clicks, id]
         setClicks(result)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicks.includes(101) ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default *

在返回语句中，请注意，如果您在显示之前循环显示项目，那么您将不得不发送，但 clicks.include(id) 和 handleIconClick(id) 中的 id 现在将使用 id 而不是硬编码的数字

【讨论】：

【解决方案2】：

添加了一个工作示例(https://codesandbox.io/s/keen-kowalevski-cguvs?fontsize=14)

import React, { useState } from "react";
import ReactDOM from "react-dom";
import IconButton from "@material-ui/core/IconButton";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

function App() {
  const [clicked, setClicked] = useState();

  return (
    <IconButton onClick={() => setClicked(true)}>
      {clicked ? <BlockIcon /> : <AddCircleIcon />}
    </IconButton>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案3】：

将图标id保存在组件状态，并有条件地渲染图标：

import React, { useState } from "react";
import { List, ListItem } from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

const * = (props) => {
  const [iconId, setIconId] = useState(100);

  const handleIconClick = (id) => () => {
    setIconId(id);
  };

  return (
    <List component="nav">
      <ListItem>
        <ListItem button onClick={handleIconClick(101)}>
          {iconId === 100 ?  <AddCircleIcon /> : <BlockIcon />}
        </ListItem>
      </ListItem>
    </List>
  );
};

export default *;

【讨论】：

【解决方案4】：

import "./App.css";
import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import React, { useState } from "react";

function App() {
const [likeColor, setLikeColor] = useState("");
const handleLike = () => {
    const color = likeColor ? "" : "primary";
    setLikeColor(color);
   };
return (
   <div className="App">
       <ThumbUpAltIcon onClick={handleLike} color={likeColor}></ThumbUpAltIcon>
   </div>
       );
   }

导出默认应用；

【讨论】：