antd中Switch组件的使用

凭栏听雨客

已于 2023-09-06 22:23:13 修改

阅读量2.3k

点赞数

分类专栏：前端React 文章标签： javascript 前端 react.js ant design

于 2023-08-15 23:07:58 首次发布

本文链接：https://blog.csdn.net/qq_43720551/article/details/132309127

版权

前端React 专栏收录该内容

20 篇文章

订阅专栏

博客介绍了Ant Design中的开关组件，以及该组件用于指定开关打开和关闭时显示内容的属性。通过示例展示了如何创建开关组件、更新状态，还说明了这些属性可接受文本或React元素，如可传递图标等复杂元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Switch> 是 Ant Design 中的一个组件，用于在开关之间切换。checkedChildren 是 <Switch> 组件的一个属性，用于指定在开关打开时显示的文本或 React 元素。

以下是 <Switch> 组件的基本语法：

import { Switch } from 'antd';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <Switch
      checked={checked}
      onChange={handleChange}
    />
  );
}

在这个例子中，我们创建了一个 <Switch> 组件，并将其状态存储在 checked 变量中。当用户切换开关时，我们更新 checked 变量的值。

现在，我们可以使用 checkedChildren 属性来指定在开关打开时显示的文本或 React 元素。例如：
在这里插入图片描述

import { Switch } from 'antd';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <Switch
      checked={checked}
      onChange={handleChange}
      checkedChildren="开启"
      unCheckedChildren="关闭"
    />
  );
}

在这个例子中，我们将 checkedChildren 属性设置为 "开启"，这意味着在开关打开时，它会显示 "开启"。同时，我们将 unCheckedChildren 属性设置为 "关闭"，这意味着在开关关闭时，它会显示 "关闭"。

需要注意的是，checkedChildren 和 unCheckedChildren 属性可以接受文本或 React 元素作为值。如果您想在开关打开时显示一个图标或其他复杂的元素，可以将一个 React 元素传递给 checkedChildren 属性。例如：

import { Switch } from 'antd';
import { HeartFilled } from '@ant-design/icons';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <Switch
      checked={checked}
      onChange={handleChange}
      checkedChildren={<HeartFilled />}
      unCheckedChildren="关注"
    />
  );
}

在这个例子中，我们将 checkedChildren 属性设置为 <HeartFilled />，这意味着在开关打开时，它会显示一个心形图标。