Bagaimanakah saya melakukan nilai peluncur apabila tetikus pergi, dan bukannya melakukan semua nilai sebelum tetikus pergi?

Question

Saya mempunyai medan input dan peluncur, julat peluncur adalah dari 1 hingga 100. Memandangkan saya juga mempunyai suis togol dan menu lungsur, saya menggunakan acara onChange untuk setiap medan dan bukannya menggunakan butang serah, termasuk peluncur.

Tetapi saya menghadapi masalah, jika saya cuba menukar peluncur dari 1 kepada 50, semua nilai dari 1 hingga 50 diserahkan dalam acara onChange. Saya cuba menggunakan acara onSlideEnd tetapi ia menunjukkan nilai lama (contohnya: apabila memilih 50 daripada 1, ia menunjukkan 1; apabila memilih 20 daripada 50, ia menunjukkan 50).

Saya mahu pada perubahan daripada 1 kepada 50, hanya 50 akan dihantar ke bahagian belakang dalam handleSubmit.

Saya telah mencuba kod ini tetapi ia tidak berjaya, tolong bantu untuk menyelesaikannya.

import React, { useEffect, useState } daripada 'react';
import { Slider } daripada "primereact/slider";
import { InputText } daripada "primereact/inputtext";
//beberapa import

const Config = () => {

  const [nilai faktor, setFactorValue] = useState(1);
  const [isSliderDragging, setIsSliderDragging] = useState(false);

  useEffect(() => {
    fetchConfig();
  }, []);
  
  const fetchConfig = async () => {
    cuba {
      // ini digunakan untuk mendapatkan nilai konfigurasi dari bahagian belakang ke set di hadapan
      respons const = menunggu Service.getMaliciousFactorConfig();
      jika (tindak balas) {
        const maliciousFactorValue = respons[0].maliciousFactor || 1;
        setFactorValue(maliciousFactorValue);
      }
    } tangkap (ralat) {
      console.log(error.message);
    }
  };

  const handleSliderChange = (acara) => {
    cuba{
      const newValue = parseInt(event.value, 10);
      setFactorValue(newValue);
      handleSubmit(newValue);
    }tangkap(ralat){
      console.log(error);
    }
  };

  const handleSliderDragEnd = (acara) => {
    setIsSliderDragging(false);
  };

  const handleInputChange = (acara) => {
    const newValue = parseInt(event.target.value, 10);
    jika (!isNaN(newValue)) {
      setFactorValue(newValue);
      handleSubmit(newValue);
    } lain {
      setFactorValue("");
    }
  };

    const handleSubmit = async(nilai) => {
      cuba{
         jika (nilai >= 1 && nilai <= 100) {
            setValidationError("");
            tunggu ConfigService.setConfig(value);
         }
      }tangkap(ralat){
         console.log(error);
      }
    };

  kembali (
          {//kod demo}
          <div className="displayFlex">
            <label htmlFor="factor">Faktor:</label>
             <div>
               <InputText id="factor" value={factorvalue} onChange={handleInputChange} className="w-full" />
               <Nilai slider={factorvalue} onChange={handleSliderChange} onSlideEnd={handleSliderDragEnd} className="w-full" min={1} max={100} />
             </div>
          </div>
          {//beberapa kod}
  );
};

eksport Konfigurasi lalai;

Answer 1

Debouncing nampaknya penyelesaian yang tepat untuk anda. . Baca lagi

Terdapat cangkuk React disediakan. di sini.