其他分享
首页 > 其他分享> > antd labelInValue的使用

antd labelInValue的使用

作者:互联网

antd labelInValue的使用

使用场景

博主最近做到两个需求,一个是从select中输入数据后调用接口,一开始的时候不会写,后面查看antd的官方文档后了解到了写法;
二是要求把id和name同时传回后端,以前使用的是select的id,再用id去匹配name,这次仿佛发现新大陆

从远端调用接口

在这里插入图片描述
使用onSearch属性

<Select
       placeholder="请选择投放点"
       onSearch={(value) => { fetchPointList({ pointName: value }) }}    // 调用这个方法
       labelInValue
       filterOption={true}
       notFoundContent={fetching ? <Spin size="small" /> : null}
       >
              {pointList.map(item => (
                 <Option key={item.value} value={item.value}>{item.text}</Option>
              ))}
</Select>

fetchPointList方法

const fetchPointList = debounce(value => {
	// 这步可有可无
        setLastFetchId(lastFetchId + 1);
        return act('getPointList', { ...value }, 'common').then(res => {
            let pointList = res.map(item => ({
                text: item.pointName,
                value: item.id,
            }));
            setPointList(pointList);
            setFetching(false);
        });
    }, 800);

debounce

由上图看出还用了debounce方法,本人对debounce不是很了解,遂查阅资源才知道是函数去抖一种方式,可以参考链接: link.

函数防抖:debounce使用场景

debounce必须等待所有资源载入后或者资源已满才开始操作(吃饭时等待饭菜上齐或者人员到齐)

  1. scroll事件(资源的加载)
  2. mousemove事件(拖拽)
  3. resize事件(响应式布局样式)
  4. keyup事件(输入框文字停止打字后才进行校验)
答主在请求数据时使用了一下debounce,目的是为了等待接口里数据全部返回,具体使用如下
debounce(function,delay,isImmediate)
function:需要执行的函数
delay:事件间隔时长(事件间隔多少时间内不再重复触发)
isImmediate:是否在触发周期内立即执行

throttle使用场景(给你10秒能干多少是多少)

  1. click事件(不停快速点击按钮,减少触发频次)
  2. scroll事件(返回顶部按钮出现\隐藏事件触发)
  3. keyup事件(输入框文字与显示栏内容复制同步)
  4. 减少发送ajax请求,降低请求频率
throttle暂时还未使用过

labelInValue

项目中需要通过form表单传递id和name,不得不说,这个属性真xx好用,将string转换成了object,object中包含两个属性key和label,label就是展示文本值,key就是id值
直接上截图展示(省去了我二次匹配的功夫,感谢antd哈哈哈哈)
在这里插入图片描述

标签:场景,debounce,item,labelInValue,使用,antd,id
来源: https://blog.csdn.net/zhouzhiling_/article/details/122868555