世界上最伟大的投资就是投资自己的教育

首页Ant Design Pro
随风 · 练气

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

随风发布于818 次阅读




如上图所示

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

类似这样的功能

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


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

    {
      title: intl.formatMessage({ id: 'isEnable' }),
      dataIndex: 'isEnable',
      width: 150,
      hideInSearch: true,
      render: (_, record: any) => (
        <Switch
          checkedChildren={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();
            }

完结


本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
统计信息
    学员: 29974
    视频数量: 1996
    文章数量: 526

© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top