如何在滑鼠離開時提交滑桿的值，而不是在滑鼠離開之前提交所有的值？

Question

<p>我有一個輸入字段和一個滑塊，滑塊的範圍是從1到100。由於我還有切換開關和下拉式選單，我為每個欄位都使用了onChange事件，而不是使用提交按鈕，包括滑桿。 </p><p>但是我遇到了一個問題，如果我嘗試將滑桿從1改變到50，所有從1到50的值都會在onChange事件中被提交。我嘗試使用onSlideEnd事件，但它顯示舊值（例如：當從1選擇50時，顯示1；當從50選擇20時，顯示50）。 </p><p>我希望在從1到50的變化中，只有50會在handleSubmit中送到後端。 </p><p>我嘗試了這段程式碼，但沒有起作用，請幫忙解決。</p><p><br />></p>

從 'react' 匯入 React, { useEffect, useState };
從「primereact/slider」導入{ Slider }；
從“primereact/inputtext”導入{InputText}；
//一些導入

const Config = () =>; {

  const [factorvalue, setFactorValue] = useState(1);
  const [isSliderDragging, setIsSliderDragging] = useState(false);

  useEffect(() => {
    獲取配置（）；
  }, []);
  
  const fetchConfig = async () =>; {
    嘗試 {
      // 這用於從後端獲取配置值以在前面設置
      const 回應 = 等待 Service.getMaliciousFactorConfig();
      如果（響應）{
        const maliciousFactorValue = 響應[0].maliciousFactor || 1;
        setFactorValue(maliciousFactorValue);
      }
    } 捕獲（錯誤）{
      console.log(錯誤.訊息);
    }
  };

  const handleSliderChange = (事件) =>; {
    嘗試{
      const newValue = parseInt(event.value, 10);
      setFactorValue(newValue);
      處理提交（新值）；
    }捕獲（錯誤）{
      控制台.log(錯誤);
    }
  };

  const handleSliderDragEnd = (事件) =>; {
    setIsSliderDragging(假);
  };

  const handleInputChange = (事件) =>; {
    const newValue = parseInt(event.target.value, 10);
    if (!isNaN(newValue)) {
      setFactorValue(newValue);
      處理提交（新值）；
    } 別的 {
      setFactorValue("");
    }
  };

    const handleSubmit = async(value) =>; {
      嘗試{
         if (值 >= 1 && 值 <= 100) {
            設定驗證錯誤（“”）；
            等待 ConfigService.setConfig(值);
         }
      }捕獲（錯誤）{
         控制台.log(錯誤);
      }
    };

  返回 （
          {//演示程式碼}
          <div className="displayFlex">
            因子：
             

               <InputText id="factor" value={factorvalue} onChange={handleInputChange} className="w-full" />>
               >
             
          

Answer 1

防手震（Debouncing）似乎是適合你的正確解決方案。 . Read more

#

有一個React鉤子（hook）可用。 here.