526互联

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

发布时间 2023-12-04 17:54:55作者: 土匪7

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')]);
            },
          }}
        />