需求描述:
数量单元格,可以点击按钮增/减。同时输入框可以输入,最后请求接口
解决方案: 请求接口的时候做了延时请求,请求成功后,改变表单数据
{
title: '数量',
dataIndex: 'count',
width:100,
renderFormItem: (item:any, config, form) => {
const recordKey = config.recordKey
const value = form.getFieldValue([recordKey, item.dataIndex])
const id = item.entry.id;
const onClick = (status: string) => {
let num = (value as any * 1)
if(status == 'reduce') {
if(value == 0) {
message.info('数量不能再减少');
return
}
num = num - 1
}else {
num = num + 1
}
if(!value) {
message.info('请注意数量为空');
return
}
// 请求接口
后台接口api(id, {
count: num,
})
.then(() => {
message.success('操作成功');
form.setFieldValue([recordKey || '', 'count'], `${num}`);
})
.finally(() => {
actionRef?.current?.reload();
});
}
return <div className='flex'>
<MinusSquareFilled style={{color:'#bfbfbf'}} onClick={() => onClick('reduce')}/>
<Input
size='small'
bordered={false}
value={value}
onChange={(e) => {
const value = e.target.value as any;
if (timeOutID?.current) {
clearTimeout(timeOutID.current);
}
const timeId = setTimeout(() => {
if (value == '') {
message.info('请注意数量为空');
return;
}
fetchUpReceiptItem(id, {
count: value * 1,
})
.then(() => {
message.success('操作成功');
})
.finally(() => {
actionRef?.current?.reload();
});
},1000)
timeOutID.current = timeId;
}}
/>
<PlusSquareFilled style={{color:'#bfbfbf'}} onClick={() => onClick('add')} />
</div>
},
},
关于timeOutID 变量
const timeOutID = useRef<any>(); // 延时
你会了吗?