如何实现PrimeReact滑块仅在拖动结束时提交最终值？

问题核心在于你把Slider的状态更新和后端提交逻辑绑定在了onChange事件上，导致拖动过程中每一次值变化都触发提交；同时之前的onSlideEnd事件没有正确获取拖动结束后的最终值。以下是修正后的实现：

import React, { useEffect, useState } from 'react';
import { Slider } from "primereact/slider";
import { InputText } from "primereact/inputtext";
// some imports

const Config = () => {

  const [factorvalue, setFactorValue] = useState(1);
  const [validationError, setValidationError] = useState(""); // 补充缺失的错误提示状态

  useEffect(() => {
    fetchConfig();
  }, []);
  
  const fetchConfig = async () => {
    try {
      const response = await Service.getMaliciousFactorConfig();
      if (response) {
        const maliciousFactorValue = response[0].maliciousFactor || 1;
        setFactorValue(maliciousFactorValue);
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  // 仅更新前端状态，不触发后端提交
  const handleSliderChange = (event) => {
    try {
      const newValue = parseInt(event.value, 10);
      setFactorValue(newValue);
    } catch (error) {
      console.log(error);
    }
  };

  // 拖动结束时提交最终值
  const handleSliderDragEnd = (event) => {
    try {
      const finalValue = parseInt(event.value, 10);
      if (finalValue >= 1 && finalValue <= 100) {
        handleSubmit(finalValue);
        setValidationError("");
      } else {
        setFactorValue(factorvalue);
        setValidationError("值必须在1-100之间");
      }
    } catch (error) {
      console.log(error);
    }
  };

  const handleInputChange = (event) => {
    const newValue = parseInt(event.target.value, 10);
    if (!isNaN(newValue)) {
      if (newValue >=1 && newValue <=100) {
        setFactorValue(newValue);
        handleSubmit(newValue);
        setValidationError("");
      } else {
        setValidationError("值必须在1-100之间");
      }
    } else {
      setFactorValue("");
      setValidationError("请输入有效数字");
    }
  };

  const handleSubmit = async(value) => {
    try {
      await ConfigService.setConfig(value);
    } catch(error) {
      console.log(error);
      setValidationError("提交失败，请重试");
    }
  };

  return (
    <>
      {/* demo code */}
      <div className="displayFlex">
        <label htmlFor="factor">Factor:</label>
        <div>
          {validationError && <p style={{color: 'red'}}>{validationError}</p>}
          <InputText id="factor" value={factorvalue} onChange={handleInputChange} className="w-full" />
          <Slider 
            value={factorvalue} 
            onChange={handleSliderChange} 
            onSlideEnd={handleSliderDragEnd} 
            className="w-full" 
            min={1} 
            max={100} 
          />
        </div>
      </div>
      {/* some code */}
    </>
  );
};

export default Config;

关键改动说明 #

• 分离Slider的状态更新与提交逻辑：handleSliderChange仅负责更新前端状态，避免拖动过程中多次触发后端请求。
• 利用onSlideEnd获取最终值：滑动结束时直接从event.value读取最终值提交，无需依赖异步更新的状态，解决旧值问题。
• 完善合法性校验：给输入框和Slider添加范围校验，补充错误提示状态的声明与展示，提升用户体验。
• 移除无用状态：删除未实际使用的isSliderDragging，简化代码结构。

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