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

相关推荐
用户479492835691510 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗10 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化
sumAll10 小时前
别再手动对齐矩形了!这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)
前端·人工智能·next.js
OpenTiny社区10 小时前
2025OpenTiny星光ShowTime!年度贡献者征集启动!
前端·vue.js·低代码
wangan09410 小时前
不带圆圈的二叉树
java·前端·javascript
狗哥哥10 小时前
从零到一:打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥10 小时前
微信小程序真机预览-数字不等宽如何解决
前端
Drift_Dream10 小时前
前端趣味交互:如何精准判断鼠标从哪个方向进入元素?
前端
hqk10 小时前
鸿蒙ArkUI:状态管理、应用结构、路由全解析
android·前端·harmonyos
米思特儿林10 小时前
NuxtImage 配置上传目录配置
前端