>  Q&A  >  본문

마우스가 떠나기 전에 모든 값을 커밋하는 대신 마우스가 떠날 때 슬라이더의 값을 어떻게 커밋합니까?

<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>
P粉129731808P粉129731808473일 전557

모든 응답(1)나는 대답할 것이다

  • P粉262926195

    P粉2629261952023-07-28 12:07:02

    디바운싱이 귀하에게 적합한 솔루션인 것 같습니다. 자세히 알아보기

    React Hook을 사용할 수 있습니다. 여기.

    회신하다
    0
  • 취소회신하다