typescript antd使用组件checkbox

在Ant Design for TypeScript中，Checkbox是一个常用的开关组件，用于表示一个选择状态。以下是使用它的一个基本示例：

首先，你需要安装Ant Design库以及对应的TypeScript支持：

npm install @ant-design/icons @ant-design/components @types/react-dom @types/react @types/antd

然后，在你的React组件里导入Checkbox组件：

import React from 'react';
import { Checkbox } from 'antd';
import 'antd/dist/antd.css'; // 引入样式

type Props = {
  checked: boolean; // 检查状态默认为false
  onChange: (checked: boolean) => void; // 当选中状态改变时触发的回调
};

function MyCheckboxComponent({ checked, onChange }: Props) {
  return (
    <Checkbox
      defaultChecked={checked} // 设置默认检查状态
      onChange={(e) => onChange(e.target.checked)} // 更新检查状态
      style={{ marginLeft: 8 }} // 可调整样式
    >
      选择
    </Checkbox>
  );
}

export default MyCheckboxComponent;

在这个例子中，`Checkbox`接受两个重要属性：`defaultChecked` 和 `onChange`，分别控制初始状态和点击事件的响应。