Как поменять иконку MaterialUI при нажатии

Question

В списке каждый элемент списка имеет «AddIcon». При нажатии я хотел бы поменять этот значок на «BlockIcon» в соответствии с его «id»

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

Вы должны создать переменную состояния для хранения статуса clickkec или не щелкнул вас, что вы можете использовать его, чтобы поменять местами значок

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

В операторе возврата обратите внимание, что если вы просматриваете элементы перед отображением, то выпридется отправить, но идентификатор в clicks.include(id) и handleIconClick (id) теперь будет использовать идентификатор, а не жестко закодированный номер

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

Answer 3

Сохранение идентификатора значка в состоянии компонента и условное отображение значка:

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;