【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能

本文主要是介绍【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如上图所示

我们经常要设置一些记录是否启用

类似这样的功能

虽然我们可以类似这样来处理

但是在列表页处理的话，可以体验更好，更直接一些

    {title: intl.formatMessage({ id: 'isEnable' }),dataIndex: 'isEnable',width: 150,hideInSearch: true,render: (_, record: any) => (<SwitchcheckedChildren={intl.formatMessage({ id: 'select_online' })}unCheckedChildren={intl.formatMessage({ id: 'select_offline' })}checked={record.isOnline}onChange={async () => {await handleUpdate({ _id: record._id, isOnline: !record.isOnline });if (actionRef.current) {actionRef.current.reload();}}}/>),},

首先后端是有 isOnline 这个属性的。

const materialCategorySchema = new mongoose.Schema({name: { type: String, required: true },image: { type: String },parent: { type: mongoose.Schema.Types.ObjectId, ref: 'MaterialCategory' },isOnline: { type: Boolean },},{ timestamps: true },
);

 await handleUpdate({ _id: record._id, isOnline: !record.isOnline });

这里会发送请求的

请求完会刷新列表页的数据

 if (actionRef.current) {actionRef.current.reload();}

完结

---

• 获取 ant design pro & nodejs & typescript 多角色权限动态菜单管理系统源码*
• 我正在做的程序员赚钱副业 - Shopify 真实案例技术赚钱营销课视频教程

这篇关于【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---