EditableProTable高级使用，自定义表单，对接接口

最新推荐文章于 2024-08-23 14:15:01 发布

糖小宝2016

最新推荐文章于 2024-08-23 14:15:01 发布

阅读量838

点赞数 6

文章标签：前端 javascript react anti-design-vue

本文链接：https://blog.youkuaiyun.com/tangxiaobao2016/article/details/135499888

版权

本文描述了一个需求，涉及点击按钮动态调整数量并进行接口请求的表单组件。组件使用了延时处理输入验证和请求，确保操作稳定且用户体验良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述:
数量单元格，可以点击按钮增/减。同时输入框可以输入，最后请求接口
解决方案: 请求接口的时候做了延时请求，请求成功后，改变表单数据
在这里插入图片描述

{
      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>(); // 延时

你会了吗？