首页 > 其他分享 >ant design使用,批量添加单词,修改单个单词

ant design使用,批量添加单词,修改单个单词

时间:2023-12-04 17:56:00浏览次数:31  
标签:ant group name 单词 item design input response

backend项目
页面路径: /Users/songximing/backend/src/pages/app/listen/Words/index.tsx
弹窗修改单个单词,列表的input没变,解决办法参考:

https://blog.csdn.net/weixin_42881588/article/details/124406364 react input的defaultValue不会变化
给input加了个key:

{
      title: '分组',
      dataIndex: 'group',
      align: 'center',
      width: 140,
      render: (_, record) => (
        <Input
          key={'group' + String(Date.now())}
          defaultValue={record.remark?.group}
          onBlur={(item) => {
            if (item.target.value === record.remark?.group) {
              return;
            }
            queryData(`/api_v/CorpusWord/changeGroup/?id=${record.id}&group=${item.target.value}`)
              .then((response) => {
                if (response) {
                  if (response.errorCode === 9999) {
                    message.success(response.errorMessage);
                    actionRef?.current?.reload();
                  } else {
                    message.warning(response.errorMessage);
                  }
                }
              })
              .catch(() => {});
          }}
        />
      ),
    },

编辑弹窗:/Users/songximing/backend/src/pages/app/listen/Words/components/Edit.tsx
上传音频:

<ProFormUploadButton
          label="单词音频"
          title="点击上传"
          accept=".mp3"
          listType="text"
          fieldProps={{
            maxCount: 1,
            beforeUpload(file) {
              const newList = fileList.filter((item) => item.name !== 'audio');
              setFileList([...newList, { name: 'audio', file }]);
              return false;
            },
            onRemove: () => {
              setFileList([...fileList.filter((item) => item.name !== 'audio')]);
            },
          }}
        />

标签:ant,group,name,单词,item,design,input,response
From: https://www.cnblogs.com/tufei7/p/17875566.html

相关文章

  • 程序员学单词-1200个基础单词2
    英语单词记忆法:a拼音联想法 1完整拼音法pen 钢笔、笔 n  pen(盆) 盆里有一只钢笔long 长的adj   long(龙)  龙很长fan 迷、扇子n 扇(风)vt   fan(饭) 吃饭的歌迷在用扇子扇风panda 熊猫n pan(盘) da(大)   盘子里有一只大熊猫......
  • Codeforces Round 904 (Div. 2) C. Medium Design
    jly:开始的想法:首先枚举max的位置。包含它的一定是全加,剩下的一定都不加。然后求所有位置的最小值。初始全0,枚举max之后,因为是加区间,min一定在两端(最左或最右)。所以不需要枚举max,我们枚举min就好(因为加区间和初始全0,这个题的特殊性)。写法注意的点:下标从0开始,区间的左端点都-1,右端......
  • AntDesignBlazor示例——列表查询条件
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/AntDesignDemo1.学习目标重构项目文件结构添加日期查询条件实现查询业务逻辑2.重构项目结构在实现列表查询条件功能之前,我们先重构一下项目结构,创建天气Mod......
  • Ant Design Vue2表单验证失效、select下拉框验证失效
    简述AntDesignVue2表单验证失效、表单校验三个下拉框,级联联动,动态赋值,第一项changge之后2,3需要=null或者='',但是发现明明第二个select已经选择了而且this.form.b不是空为啥还是校验不通过前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注......
  • Ant Design Vue2表单验证失效、select下拉框验证失效
    简述AntDesignVue2表单验证失效、表单校验三个下拉框,级联联动,动态赋值,第一项changge之后2,3需要=null或者='',但是发现明明第二个select已经选择了而且this.form.b不是空为啥还是校验不通过前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注......
  • AntDesignBlazor示例——创建列表页
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/AntDesignDemo1.学习目标使用Table组件创建列表页面使用DisplayName特性显示中文表头使用模板和Tag组件显示高温数据使用TitleTemplate自定义栏位表头2.创......
  • Skeleton Design 理念在 Angular 应用开发中的具体应用一例
    SkeletonDesign这个概念,想必前端开发人员比较熟悉,而普通的App用户,可能甚至都没有听说过,但实际上我们每个人,每天几乎都会受益于这个设计理念。SkeletonDesign在一些国内技术社区的技术博客里,通常被称为骨架屏设计,是一种用户界面设计策略。骨架屏设计不是一种具体的基于某种......
  • MAC系统通过vagrant的安装虚拟机
    brewinstallvagrant#使用brew进行安装brewinstallVirtualBox#安装虚拟机vagrant-v#先检查一下是否安装成功初始化项目文件夹mkdirvagrant_getting_startedcdvagrant_getting_startedvagrantinitcentos/7使用centos7初始化一个虚拟机vagrantup启动虚拟......
  • MATLAB时间序列数据重建与平滑:HANTS滤波
      本文介绍在MATLAB中,实现基于HANTS算法(时间序列谐波分析法)的长时间序列数据去噪、重建、填补的详细方法。  HANTS(HarmonicAnalysisofTimeSeries)是一种用于时间序列分析和插值的算法。它基于谐波分析原理,可以从观测数据中提取出周期性变化的信号成分,并进行数据插值和去噪......
  • 经纬恒润eVCU助力Stellantis量产落地
        近日,Stellantis搭载经纬恒润整车控制器(eVCU一代平台)的车型平台已量产落地。该车型主要面向北美市场,首款量产车型为商用货车车型。    此次合作中,经纬恒润提供了可靠的整车控制器,并通过多年在乘用车及商用车整车控制器的技术积累,帮助解读驾驶员意图,监控下层的各......