@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
48 lines (47 loc) • 1.96 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Input } from 'antd';
import { debounce } from 'lodash';
import errorBoundary from '../../../../../hocs/errorBoundary';
var DelayedInput = function (_a) {
var externalValue = _a.value, onChange = _a.onChange, _b = _a.delay, delay = _b === void 0 ? 500 : _b, className = _a.className, placeholder = _a.placeholder;
var _c = __read(useState(externalValue), 2), value = _c[0], setValue = _c[1];
// 使用 useRef 存储防抖函数
var debounceRef = useRef();
// 同步外部值到内部状态
useEffect(function () {
setValue(externalValue);
}, [externalValue]);
useEffect(function () {
// 初始化防抖函数，并存储到 ref 中
debounceRef.current = debounce(function (newValue) {
onChange(newValue);
}, delay);
// 在组件卸载时清理防抖函数
return function () {
debounceRef.current && debounceRef.current.cancel();
};
}, [onChange, delay]);
var handleChange = useCallback(function (e) {
var newValue = e.target.value;
setValue(newValue); // 更新本地状态
debounceRef.current && debounceRef.current(newValue); // 调用防抖函数
}, []);
return (React.createElement(Input, { value: value, onChange: handleChange, className: className, placeholder: placeholder }));
};
export default errorBoundary(DelayedInput);