antd labelInValue的使用

• 使用场景
• • 从远端调用接口
  • • debounce
    • • 函数防抖：debounce使用场景
      • • 答主在请求数据时使用了一下debounce，目的是为了等待接口里数据全部返回，具体使用如下
      • throttle使用场景（给你10秒能干多少是多少）
      • • throttle暂时还未使用过
  • 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