<p>입력 필드와 슬라이더가 있는데 슬라이더의 범위는 1부터 100까지입니다. 토글 스위치와 드롭다운 메뉴도 있으므로 슬라이더를 포함한 제출 버튼을 사용하는 대신 각 필드에 대해 onChange 이벤트를 사용하고 있습니다. </p><p>그런데 슬라이더를 1에서 50으로 변경하려고 하면 1부터 50까지의 모든 값이 onChange 이벤트에 제출되는 문제가 발생했습니다. onSlideEnd 이벤트를 사용해 보았지만 이전 값이 표시됩니다(예: 1에서 50을 선택하면 1이 표시되고 50에서 20을 선택하면 50이 표시됩니다). </p><p>1에서 50으로 변경되면 50만 handlerSubmit의 백엔드로 전송되기를 바랍니다. </p><p>이 코드를 시도했지만 작동하지 않았습니다. 문제를 해결하도록 도와주세요.
<pre class="brush:php;toolbar:false;">'react'에서 React, { useEffect, useState } 가져오기;
"primeract/slider"에서 { Slider }를 가져옵니다.
"primeract/inputtext"에서 {InputText }를 가져옵니다.
//일부 수입
const 구성 = () => {
const [factorvalue, setFactorValue] = useState(1);
const [isSliderDragged, setIsSliderDragged] = useState(false);
useEffect(() => {
fetchConfig();
}, []);
const fetchConfig = async () => {
노력하다 {
// 백엔드에서 구성 값을 가져와서 앞에 설정할 때 사용됩니다.
const 응답 = Service.getMaliciousFactorConfig()를 기다립니다.
if (응답) {
const 악성FactorValue = response[0].maliciousFactor || 1;
setFactorValue(maliciousFactorValue);
}
} 잡기(오류) {
console.log(error.message);
}
};
const handlerSliderChange = (이벤트) => {
노력하다{
const newValue = parsInt(event.value, 10);
setFactorValue(newValue);
handlerSubmit(newValue);
}캐치(오류){
console.log(오류);
}
};
const handlerSliderDragEnd = (이벤트) => {
setIsSliderDragged(false);
};
const handlerInputChange = (이벤트) => {
const newValue = parsInt(event.target.value, 10);
if (!isNaN(newValue)) {
setFactorValue(newValue);
handlerSubmit(newValue);
} 또 다른 {
setFactorValue("");
}
};
const handlerSubmit = async(value) => {
노력하다{
if (값 >= 1 && 값 <= 100) {
setValidationError("");
ConfigService.setConfig(value)를 기다립니다.
}
}캐치(오류){
console.log(오류);
}
};
반품 (
{//데모 코드}
<div className="displayFlex">
<label htmlFor="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>
{//일부 코드}
);
};
기본 구성 내보내기</pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
디바운싱이 귀하에게 적합한 솔루션인 것 같습니다. 자세히 알아보기
React Hook을 사용할 수 있습니다. 여기.