本文介绍在 react 中使用 primereact slider 时，避免拖拽过程中频繁触发 onchange 导致多次提交的问题，通过监听 onslideend 事件，在用户松开鼠标后仅提交最终选中值。
在构建配置型表单时，滑块（Slider）常用于调节数值型参数（如恶意因子 1–100）。但若直接将 handleSubmit 绑定在 onChange 上，用户从 1 拖到 50 的过程会连续触发约 49 次状态更新与后端请求——这不仅浪费资源、增加服务压力，还可能因异步竞态导致最终提交值错乱（例如 onSlideEnd 触发时 factorvalue 尚未完成 setState 更新，仍为旧值）。
核心解决方案：分离状态更新与提交时机
✅ onChange 仅负责同步 UI 状态（setFactorValue），不触发提交；
✅ onSlideEnd（或 onBlur/onMouseUp）作为“确认动作”，在此刻读取当前最新值并调用 handleSubmit。
但需注意：onSlideEnd 回调中直接访问 factorvalue 可能捕获闭包中的旧值（尤其在函数组件中 useState 更新是异步的）。因此更健壮的做法是让 onSlideEnd 接收事件对象，并从中提取 event.value（PrimeReact Slider 的 onSlideEnd 事件参数包含当前最终值）：
setFactorValue(e.value)} // 仅更新状态 onSlideEnd={(e) => handleSubmit(e.value)} // 提交最终值 className="w-full" min={1} max={100} />
同时，确保 handleSubmit 具备幂等性与防抖意识（尤其在快速连续拖拽后松开时）：
const handleSubmit = useCallback(async (value: number) => {
if (value < 1 || value > 100) return;
try {
setValidationError("");
await ConfigService.setConfig(value);
} catch (error) {
console.error("Failed to save slider value:", error);
}
}, []);⚠️ 注意事项：
- 不要依赖 onSlideEnd={() => handleSubmit(factorvalue)} —— 该写法易因闭包捕获过期 state；
- 若需兼容键盘操作（如方向键调节），可补充 onBlur 事件作为兜底；
- 对于高敏感配置项，建议在提交前增加二次确认或本地预览；
- 后端接口应设计为幂等（如 PUT /config/malicious-factor），避免重复提交副作用。
通过以上调整，滑块交互将符合用户直觉：拖动时不扰动系统，松手即生效，兼顾体验与稳定性。
