如何在鼠标离开时提交滑块的值，而不是在鼠标离开之前提交所有的值？

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.