如何在 ReactJS 中使用 ToggleButtonGroup 组件？

ToggleButtonGroup 是一个由 Material-UI 提供的 React 组件，旨在为开发人员提供一个可以轻松使用的可切换按钮组。与单选按钮不同，ToggleButtonGroup 允许用户选择多个选项，因此在许多情况下可以作为更好的选择。

步骤

步骤 1 - 安装 Material-UI

在使用 ToggleButtonGroup 之前，必须先安装 Material-UI 包。通过以下命令使用 npm 进行安装：

npm install @material-ui/core

在安装完成后，应该可以从您的 React 组件中通过导入 AppBar、Button、Container 等组件来使用 Material-UI 定义的样式。

步骤 2 - 导入 ToggleButtonGroup

要使用 ToggleButtonGroup 组件，必须在您的 React 组件中导入它。请使用以下命令：

import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

步骤 3 - 创建 ToggleButtonGroup

接下来，您需要使用以下方法之一来创建 ToggleButtonGroup：

3.1 通过属性定义 ToggleButton

<ToggleButtonGroup
  value={value}
  onChange={handleValueChange}
  aria-label="text formatting"
>
  <ToggleButton value="bold" aria-label="bold">
    <FormatBoldIcon />
  </ToggleButton>
  <ToggleButton value="italic" aria-label="italic">
    <FormatItalicIcon />
  </ToggleButton>
  <ToggleButton value="underline" aria-label="underline">
    <FormatUnderlinedIcon />
  </ToggleButton>
  <ToggleButton value="strike" aria-label="strike">
    <StrikethroughSIcon />
  </ToggleButton>
  <ToggleButton value="size" aria-label="font size">
    <TextFieldsIcon />
    <ArrowDropDownIcon />
  </ToggleButton>
</ToggleButtonGroup>

可以看到，在这个例子中，我们传递以下属性：

• value: 被选中的 ToggleButton 的值
• onChange: 当选取的值发生变化时的回调
• aria-label: 对整个 ToggleButtonGroup 的描述，用于 Accessibility （辅助功能）等

注意， 组件还需要自己定义样式。

3.2 使用函数定义 ToggleButton

function ToggleButtonGroupDemo() {
  const [formats, setFormats] = React.useState(() => ['bold', 'italic']);

  const handleFormat = (event, newFormats) => {
    setFormats(newFormats);
  };

  return (
    <ToggleButtonGroup
      value={formats}
      onChange={handleFormat}
      aria-label="text formatting"
    >
      <ToggleButton value="bold" aria-label="bold">
        <FormatBoldIcon />
      </ToggleButton>
      <ToggleButton value="italic" aria-label="italic">
        <FormatItalicIcon />
      </ToggleButton>
      <ToggleButton value="underline" aria-label="underline">
        <FormatUnderlinedIcon />
      </ToggleButton>
      <ToggleButton value="strike" aria-label="strike">
        <StrikethroughSIcon />
      </ToggleButton>
      <ToggleButton value="size" aria-label="font size">
        <TextFieldsIcon />
        <ArrowDropDownIcon />
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

可以看到，在这个例子中，我们使用了一些 hook 方法来保存格式数组，并使用 组件来进行渲染。我们还定义了一个叫做 handleFormat 的函数，作为回调来响应组件上的更改。

步骤 4 - 引入依赖

最后，在您的 React 组件中，不要忘记导入所需的依赖项：

import ToggleButton from '@material-ui/lab/ToggleButton';
import FormatBoldIcon from '@material-ui/icons/FormatBold';
import FormatItalicIcon from '@material-ui/icons/FormatItalic';
import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
import StrikethroughSIcon from '@material-ui/icons/StrikethroughS';
import TextFieldsIcon from '@material-ui/icons/TextFields';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';

结论

ToggleButtonGroup 是一个非常方便的组件，可以很容易地为您的 React 应用程序添加新的切换按钮。为了开始使用它，您需要先使用 npm 安装依赖项，然后导入您需要使用的组件并创建 ToggleButtonGroup，最后引入所需的依赖。