【antd 的switch 使用】

antd 的switch 使用

实现如图的动态切换的switch开关

通常在使用中前端需要保存选中的值然后传递给后端，这就需要使用 Form 表单来实现

import React, { Fragment, useEffect, useState } from 'react';
import {Form,Switch,} from 'antd';
const FormItem = Form.Item;
@Form.Create()
function DueDiligenceCard(props){
   const {detailInfo} = props
   //Switch开关
   //因为要保存用户选择的值 
    <FormItem label="是否异地" required>
        {getFieldDecorator('offSite', {
           initialValue: (detailInfo && detailInfo.offSite === '1') || false,
           valuePropName: 'checked',
           rules: [{ required: true, message: '请选择是否异地' }],
       })
       (
          <Switch checkedChildren="是"unCheckedChildren="否" disabled={false} />
       )
       }
   </FormItem>
}
export default Form.create()(DueDiligenceCard);

最开始尝试动态修改switch 的值 ,我想的是checked={true},是可以改变，但是不能修改 ，最后考虑是valuePropName，可以动态设置switch的变量。