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

相关推荐
DT——1 小时前
Vite项目中eslint的简单配置
前端·javascript·代码规范
学习ing小白3 小时前
JavaWeb - 5 - 前端工程化
前端·elementui·vue
真的很上进4 小时前
【Git必看系列】—— Git巨好用的神器之git stash篇
java·前端·javascript·数据结构·git·react.js
胖虎哥er4 小时前
Html&Css 基础总结(基础好了才是最能打的)三
前端·css·html
qq_278063714 小时前
css scrollbar-width: none 隐藏默认滚动条
开发语言·前端·javascript
.ccl4 小时前
web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue(学习版2)
前端·javascript·vue.js
小徐不会写代码4 小时前
vue 实现tab菜单切换
前端·javascript·vue.js
2301_765347544 小时前
Vue3 Day7-全局组件、指令以及pinia
前端·javascript·vue.js
喝旺仔la4 小时前
VSCode的使用
java·开发语言·javascript
ch_s_t4 小时前
新峰商城之分类三级联动实现
前端·html