本文介绍如何使用 primereact slider 实现“仅在鼠标松开/拖拽结束时提交最终值”，避免 onchange 频繁触发导致无效请求，通过分离状态更新与提交逻辑，确保后端只接收一次准确的最终值。
在 React 中使用滑块（如 primereact/slider）时，若将表单提交逻辑直接绑定到 onChange 事件，会导致用户拖动过程中每移动一个刻度就触发一次 handleSubmit —— 这不仅浪费网络资源、增加后端压力，还可能因中间值（如从 1 拖到 50 过程中的 23、37 等）引发业务逻辑异常。
根本原因在于：onChange 在滑块值实时变化时持续触发，而 onSlideEnd（或 onBlur/onMouseUp）才是用户完成交互的可靠信号。但需注意：onSlideEnd 回调中直接读取 event.value 可能获取旧值（尤其在异步渲染或状态未及时同步时），因此应以受控组件的当前 state 值为准，而非事件对象。
✅ 正确做法是：
- onChange：仅更新本地状态（setFactorValue），不执行提交；
- onSlideEnd：在拖拽结束时，读取最新 factorvalue 并调用 handleSubmit。
以下是优化后的关键代码段：
const handleSliderChange = (event: { value: number }) => {
// ✅ 仅更新状态，不提交
setFactorValue(event.value);
};
const handleSubmit = async (value: number) => {
if (value < 1 || value > 100) return;
try {
setValidationError("");
await ConfigService.setConfig(value);
} catch (error) {
console.error("Failed to save config:", error);
}
};
// ✅ 在 onSlideEnd 中提交当前 state 值（非 event.value）
<Slider
value={factorvalue}
onChange={handleSliderChange}
onSlideEnd={() => handleSubmit(factorvalue)} // ← 关键：使用闭包捕获最新 state
className="w-full"
min={1}
max={100}
/>⚠️ 注意事项：
- 不要依赖 onSlideEnd 的 event.value（PrimeReact 早期版本存在该 bug），始终以 factorvalue 状态为准；
- 若需兼容键盘操作（如方向键调整），可补充 onBlur 事件作为兜底；
- 对于输入框（InputText），仍可保留 onChange 即时提交（因其本身无连续拖拽行为），但建议统一为“失焦提交”以保持交互一致性；
- 如需防抖或节流提交（如防止快速双击），可在 handleSubmit 内部添加简易锁机制（如 isSubmitting 状态）。
通过该方案，用户从 1 拖至 50 时，前端仅在松开鼠标瞬间发送一次 50 到后端，彻底解决中间值污染问题，同时保持响应式体验与逻辑健壮性。
