ant design使用,批量添加单词,修改单个单词
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')]);
},
}}
/>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
2016-12-04 尚德,国美 interview summary
2016-12-04 HJ-第二周,真机调试