Material-UI 添加图标以在开启时切换

在 Material-UI 中，可以使用 IconButton 组件来添加图标，并使用 useState 钩子来在开启时切换。

安装

使用 npm 安装 Material-UI:

npm install @material-ui/core

导入

在需要使用的项目中导入 IconButton 和需要的图标，例如：

import IconButton from '@material-ui/core/IconButton';
import { DeleteIcon, DoneIcon } from '@material-ui/icons';

添加图标

使用 IconButton 和需要的图标来添加图标，例如：

export default function IconButtons() {
  const [completed, setCompleted] = useState(false);

  const handleClick = () => {
    setCompleted(!completed);
  };

  return (
    <IconButton onClick={handleClick}>
      {completed ? <DoneIcon /> : <DeleteIcon />}
    </IconButton>
  );
}

切换开关

在 IconButton 的点击事件中使用 useState 钩子来切换开关，例如：

const [completed, setCompleted] = useState(false);

const handleClick = () => {
  setCompleted(!completed);
};

完整代码

下面是完整的例子，用于添加图标以在开启时切换。

import React, { useState } from 'react';
import IconButton from '@material-ui/core/IconButton';
import { DeleteIcon, DoneIcon } from '@material-ui/icons';

export default function IconButtons() {
  const [completed, setCompleted] = useState(false);

  const handleClick = () => {
    setCompleted(!completed);
  };

  return (
    <IconButton onClick={handleClick}>
      {completed ? <DoneIcon /> : <DeleteIcon />}
    </IconButton>
  );
}

Markdown 代码片段：

## 安装

使用 npm 安装 Material-UI:

```bash
npm install @material-ui/core

导入

在需要使用的项目中导入 IconButton 和需要的图标，例如：

import IconButton from '@material-ui/core/IconButton';
import { DeleteIcon, DoneIcon } from '@material-ui/icons';

添加图标

使用 IconButton 和需要的图标来添加图标，例如：

export default function IconButtons() {
  const [completed, setCompleted] = useState(false);

  const handleClick = () => {
    setCompleted(!completed);
  };

  return (
    <IconButton onClick={handleClick}>
      {completed ? <DoneIcon /> : <DeleteIcon />}
    </IconButton>
  );
}

切换开关

在 IconButton 的点击事件中使用 useState 钩子来切换开关，例如：

const [completed, setCompleted] = useState(false);

const handleClick = () => {
  setCompleted(!completed);
};

完整代码

下面是完整的例子，用于添加图标以在开启时切换。

import React, { useState } from 'react';
import IconButton from '@material-ui/core/IconButton';
import { DeleteIcon, DoneIcon } from '@material-ui/icons';

export default function IconButtons() {
  const [completed, setCompleted] = useState(false);

  const handleClick = () => {
    setCompleted(!completed);
  };

  return (
    <IconButton onClick={handleClick}>
      {completed ? <DoneIcon /> : <DeleteIcon />}
    </IconButton>
  );
}