基于Ant Design Switch开关组件封装的开和关默认值为1和0的开关组件

背景

碰见一个业务需求需要使用开关组件，后端设置的默认值是1和0，但Ant Design官方Switch组件的默认值是布尔类型true或false，所以自己基于antd 的Switch组件封装一个默认值是1和0的开关组件。

下面是组件的代码和使用方法

组件代码

封装一个名为MySwitch的组件

import { useState } from 'react';
import { Switch } from 'antd';

export default function MySwitch({ onChange, ...restProps }) {
  const [switchValue, setSwitchValue] = useState(false);

  function handleSwitchChange(value) {
    const newValue = value
    setSwitchValue(newValue);
    if (onChange) {
      onChange(newValue ? 1 : 0);
    }
  }

  return (
    <Switch {...restProps} onChange={(value) => handleSwitchChange(value)}></Switch >
  );
}

使用方法

下面展示一些 内联代码片。

//从你存放的地方引入MySwitch组件
import MySwitch from '@/components/MySwitch'；

//在表单中使用MySwitch组件

 <Form.Item name="switch" rules={[{ required: false, message: '请输入' }]} label='自己的开关组件'>
        <MySwitch checkedChildren="ON" unCheckedChildren="OFF" defaultChecked={1 ? true : false} /> //使用defaultChecked设置初始值
</Form.Item>