antd react form Switch回显数据valuePropName=“checked“

在Ant Design中,使用Form组件和Switch组件时,可以通过Form.Item的name属性来绑定数据,并通过Form的initialValues来回显数据。

javascript 复制代码
import React from 'react';
import { Form, Switch } from 'antd';
 
const Demo = () => {
  return (
    <Form
      initialValues={{
        switchData: true, // 假设这是要回显的Switch状态
      }}
    >
      <Form.Item name="switchData" valuePropName="checked">
        <Switch />
      </Form.Item>
    </Form>
  );
};
 
export default Demo;

上述代码中,Form.Item的name属性与initialValues中的键名相对应,以此来确定需要回显的数据。valuePropName="checked"告诉Form.Item Switch组件的状态应该由checked属性来控制。当表单首次渲染时,Switch组件会根据initialValues中的switchData值来设置自身的状态。

相关推荐
自然 醒2 分钟前
企业微信自建应用开发详细教程,如何获取授权链接?如何使用js-sdk?
javascript·vue.js·企业微信
AKclown25 分钟前
基于Monaco的diffEditor实现内容对比
前端·vue.js·react.js
Moonbit29 分钟前
MoonBit Pearls Vol.12:初探 MoonBit 中的 Javascript 交互
javascript·后端·面试
chenbin___38 分钟前
react native中 createAsyncThunk 的详细说明,及用法示例(转自通义千问)
javascript·react native·react.js
摆烂工程师39 分钟前
(2025年11月)开发了 ChatGPT 导出聊天记录的插件,ChatGPT Free、Plus、Business、Team 等用户都可用
前端·后端·程序员
gongzemin1 小时前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户41180034153411 小时前
Flutter课题汇报
前端
环信1 小时前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua1 小时前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
海云前端11 小时前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端