如何在鼠标离开时提交滑块的值，而不是在鼠标离开之前提交所有的值？
<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>
<pre class="brush:php;toolbar:false;">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;</pre>
<p><br /></p>
1
922
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
防抖动（Debouncing）似乎是适合你的正确解决方案。. Read more
有一个React钩子（hook）可用。 here.