Wie kann ich den Wert des Schiebereglers festschreiben, wenn die Maus ihn verlässt, anstatt alle Werte festzuschreiben, bevor die Maus ihn verlässt?

Question

Ich habe ein Eingabefeld und einen Schieberegler, der Bereich des Schiebereglers liegt zwischen 1 und 100. Da ich auch Kippschalter und Dropdown-Menüs habe, verwende ich das onChange-Ereignis für jedes Feld, anstatt eine Senden-Schaltfläche einschließlich des Schiebereglers zu verwenden.

Aber ich bin auf ein Problem gestoßen: Wenn ich versuche, den Schieberegler von 1 auf 50 zu ändern, werden alle Werte von 1 bis 50 im onChange-Ereignis übermittelt. Ich habe versucht, das Ereignis onSlideEnd zu verwenden, aber es zeigt alte Werte an (zum Beispiel: Bei Auswahl von 50 aus 1 wird 1 angezeigt; bei Auswahl von 20 aus 50 wird 50 angezeigt).

Ich möchte, dass bei der Änderung von 1 auf 50 nur 50 in handleSubmit an das Backend gesendet werden.

Ich habe diesen Code ausprobiert, aber er hat nicht funktioniert. Bitte helfen Sie, ihn zu lösen.

import React, { useEffect, useState } from 'react';
import {Slider} aus „primereact/slider“;
import { InputText } from „primereact/inputtext“;
//einige Importe

const Config = () => {

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

  useEffect(() => {
    fetchConfig();
  }, []);
  
  const fetchConfig = async () => {
    versuchen {
      // Dies wird verwendet, um den Konfigurationswert vom Backend abzurufen, um ihn vorne festzulegen
      const Response = Warten auf Service.getMaliciousFactorConfig();
      if (Antwort) {
        const bösartigerFactorValue = Antwort[0].maliciousFactor || 1;
        setFactorValue(maliciousFactorValue);
      }
    } Catch (Fehler) {
      console.log(error.message);
    }
  };

  const handleSliderChange = (event) => {
    versuchen{
      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);
    } anders {
      setFactorValue("");
    }
  };

    const handleSubmit = async(value) => {
      versuchen{
         if (Wert >= 1 && Wert <= 100) {
            setValidationError("");
            Warten Sie auf ConfigService.setConfig(value);
         }
      }catch(error){
         console.log(error);
      }
    };

  zurückkehren (
          {//Democode}
          <div className="displayFlex">
            <label htmlFor="factor">Faktor:</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>
          {//etwas Code}
  );
};

Standardkonfiguration exportieren;

Answer 1

防抖动（Debouncing）似乎是适合你的正确解决方案。. Read more

有一个React钩子（hook）可用。 here.