我有一个输入字段和一个滑块，滑块的范围是从1到100。由于我还有切换开关和下拉菜单，我为每个字段都使用了onChange事件，而不是使用提交按钮，包括滑块。

但是我遇到了一个问题，如果我尝试将滑块从1改变到50，所有从1到50的值都会在onChange事件中被提交。我尝试使用onSlideEnd事件，但它显示旧值（例如：当从1选择50时，显示1；当从50选择20时，显示50）。

我希望在从1到50的变化中，只有50会在handleSubmit中发送到后端。

我尝试了这段代码，但没有起作用，请帮忙解决。

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 [isSliderDragging, setIsSliderDragging] = useState(false);

  useEffect(() => {
    fetchConfig();
  }, []);
  
  const fetchConfig = async () => {
    try {
      // this is used to get config value from backend to set in front
      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);
      handleSubmit(newValue);
    }catch(error){
      console.log(error);
    }
  };

  const handleSliderDragEnd = (event) => {
    setIsSliderDragging(false);
  };

  const handleInputChange = (event) => {
    const newValue = parseInt(event.target.value, 10);
    if (!isNaN(newValue)) {
      setFactorValue(newValue);
      handleSubmit(newValue);
    } else {
      setFactorValue("");
    }
  };

    const handleSubmit = async(value) => {
      try{
         if (value >= 1 && value <= 100) {
            setValidationError("");
            await ConfigService.setConfig(value);
         }
      }catch(error){
         console.log(error);
      }
    };

  return (
          {//demo code}
          <div className="displayFlex">
            <label htmlFor="factor">Factor:</label>
             <div>
               <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;