Question

在列表中，每个列表项都有一个“ 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 StackOverflow = () => {
    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 StackOverflow

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

Answer 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 StackOverflow = () => {
    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 StackOverflow

我还注意到，由于您使用的是列表，因此您可能希望单击多个项目，如果是这种情况，则应将其放在下面的表格中

const StackOverflow = () => {
    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 StackOverflow

在return语句中，请注意，如果要在显示之前循环浏览项目，则必须发送，但是clicks.include(id)和handleIconClick（id）中的ID现在将使用该ID，而不是硬编码号码

Answer 2

将图标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 StackOverflow = (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 StackOverflow;

Answer 3

添加了一个有效的示例（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);

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

导出默认应用；

单击时如何切换MaterialUI图标

4 个答案: