如何在ReferenceInput与AutocompleteInput中使用debounce？

在react-admin里，确实没有直接给AutocompleteInput或ReferenceInput内置debounce属性，但可以通过两种常见方式实现防抖效果：

方法1：利用useDebounce钩子控制过滤请求 #

通过useDebounce钩子延迟传递搜索值给ReferenceInput的过滤条件，避免输入过程中频繁发起请求：

import { useState } from 'react';
import { useDebounce } from '@react-admin/ra-core';
import { ReferenceInput, AutocompleteInput } from 'react-admin';

const DebouncedReferenceInput = (props) => {
  const [searchVal, setSearchVal] = useState('');
  // 设置300ms的防抖延迟，可根据需求调整
  const debouncedVal = useDebounce(searchVal, 300);

  return (
    <ReferenceInput
      {...props}
      // 将防抖后的值作为搜索过滤参数
      filter={{ q: debouncedVal }}
    >
      <AutocompleteInput
        value={searchVal}
        onChange={(e) => setSearchVal(e.target.value)}
        {...props}
      />
    </ReferenceInput>
  );
};

使用时直接替换原来的ReferenceInput即可：

<DebouncedReferenceInput source="userId" reference="users" />

方法2：自定义带防抖的AutocompleteInput组件 #

借助lodash的debounce函数，包装AutocompleteInput的onChange事件，实现输入防抖：

import { useMemo } from 'react';
import { debounce } from 'lodash';
import { AutocompleteInput } from 'react-admin';

const DebouncedAutocompleteInput = (props) => {
  // 用useMemo缓存防抖函数，避免每次渲染重新创建
  const debouncedOnChange = useMemo(
    () => debounce((event) => props.onChange(event), 300),
    [props.onChange]
  );

  return <AutocompleteInput {...props} onChange={debouncedOnChange} />;
};

使用时嵌套在ReferenceInput里：

<ReferenceInput source="userId" reference="users">
  <DebouncedAutocompleteInput />
</ReferenceInput>

两种方法的区别：第一种是控制请求发起的时机，第二种是延迟触发输入的change事件，可根据自己的业务需求选择。

内容的提问来源于stack exchange，提问作者Carlos