如何在鼠标离开时提交滑块的值,而不是在鼠标离开之前提交所有的值?
<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" />>
>
{//一些代码}
);
};
导出默认配置;</pre>
<p><br />></p>