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值来设置自身的状态。

相关推荐
a11177612 小时前
Three.js 的前端 WebGL 页面合集(日本 开源项目)
前端·javascript·webgl
Kk.080212 小时前
项目《基于Linux下的mybash命令解释器》(一)
前端·javascript·算法
程序员鱼皮12 小时前
又一个新项目开源,让 AI 帮你盯全网热点!
javascript·ai·程序员·编程·ai编程
MXN_小南学前端12 小时前
前端开发中 try...catch 到底怎么用?使用场景和最佳实践
javascript·vue.js
星空椰12 小时前
JavaScript 基础进阶:分支、循环与数组实战总结
开发语言·javascript·ecmascript
小李子呢021113 小时前
前端八股---闭包和作用域链
前端
IT_陈寒13 小时前
Redis的内存溢出坑把我整懵了,分享这个血泪教训
前端·人工智能·后端
m0_7381207213 小时前
渗透测试基础ctfshow——Web应用安全与防护(五)
前端·网络·数据库·windows·python·sql·安全
Z_Wonderful13 小时前
基于 Vite 的 React+Vue 混部完整模板(含目录结构、依赖清单、启动脚本)
前端·vue.js·react.js
Rooting++14 小时前
腾讯无界微前端源码分析
前端