【antd】Switch，0和1，怎么办？

根据官方文档，Switch的值只可能是true和false。但后端一般存储的是0和1，该怎么办？

方法一 转换接口数据

1. 从接口来的数据 apiData={staus:1}
2. 转化为表单 form={status:true}
3. 再次转换传回接口 requestBody={staus:1}

方法二 封装Switch为NumericSwitch

示例代码来自AI

import { Switch } from 'antd';

const NumericSwitch = ({ value, onChange, ...props }) => {
  return (
    <Switch
      {...props}
      checked={value === 1}
      onChange={(checked) => onChange(checked ? 1 : 0)}
    />
  );
};

方法三 使用react-vmodel

"use client"
import { Button, Form, Switch } from "antd"
import { Model } from "react-vmodel"

  type FieldType = { status: number }
  const initialValues = { status: 1 }
  
export default function Demo() {
  const handleSubmit = (value: FieldType) => {
    console.log("value", value)
  }
  return (
    <Form onFinish={handleSubmit} initialValues={initialValues}>
      <Form.Item name={"status"}>
        <Model>{(vModel) => 
        <Switch {...vModel.checked({ trueValue: 1, falseValue: 0 })}></Switch>}
        </Model>
      </Form.Item>
      <Form.Item label={null}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

支持一下

热情地欢迎各位兄弟姐妹的大力支持！

github: github.com/leafio?tab=...

期待至少一个项目能达成1000个star

期待至少一个npm能达成每周1000次下载

• Soon-Admin TS全栈后台管理系统
  • 前端vue3版：soon-admin-vue3
  • 前端react版：soon-admin-react-nextjs
  • 后端express：soon-admin-express
• soon-mock 一键生成增删查改，有ui的json-server，可js自定义逻辑
• soon-tools 分层级JSON转TS类型，有网页版、npm、exe三种方式使用
• soon-i18n 类型安全的函数式i18n库，支持vue3、react、solid、svelte
• soon-storage 对于localStorage的类型安全封装
• soon-fetch 不到3K的组合式请求库
• react-vmodel 多层级objcet双向绑定，像vue一样简单