Comment valider la valeur du curseur lorsque la souris part, au lieu de valider toutes les valeurs avant le départ de la souris ?

Question

J'ai un champ de saisie et un curseur, la plage du curseur est de 1 à 100. Comme j'ai également des interrupteurs à bascule et des menus déroulants, j'utilise l'événement onChange pour chaque champ au lieu d'utiliser un bouton de soumission, y compris le curseur.

Mais j'ai rencontré un problème, si j'essaie de changer le curseur de 1 à 50, toutes les valeurs de 1 à 50 sont soumises dans l'événement onChange. J'ai essayé d'utiliser l'événement onSlideEnd mais il affiche les anciennes valeurs (par exemple : lors de la sélection de 50 sur 1, il affiche 1 ; lors de la sélection de 20 sur 50, il affiche 50).

Je souhaite que lors du passage de 1 à 50, seuls 50 soient envoyés au backend dans handleSubmit.

J'ai essayé ce code mais il n'a pas fonctionné, aidez-nous à le résoudre.

importer React, { useEffect, useState } depuis 'react';
importer { Slider } depuis " primereact/slider " ;
importer {InputText} depuis "primereact/inputtext" ;
//quelques importations

const Config = () => {

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

  useEffect(() => {
    fetchConfig();
  }, []);
  
  const fetchConfig = async () => {
    essayer {
      // ceci est utilisé pour obtenir la valeur de configuration du backend à définir devant
      const réponse = attendre Service.getMaliciousFactorConfig();
      si (réponse) {
        const malwareFactorValue = réponse[0].maliciousFactor || 1;
        setFactorValue(maliciousFactorValue);
      }
    } attraper (erreur) {
      console.log(erreur.message);
    }
  } ;

  const handleSliderChange = (événement) => {
    essayer{
      const newValue = parseInt(event.value, 10);
      setFactorValue(nouvelleValue);
      handleSubmit (nouvelle valeur);
    }attraper(erreur){
      console.log(erreur);
    }
  } ;

  const handleSliderDragEnd = (événement) => {
    setIsSliderDragging(faux);
  } ;

  const handleInputChange = (événement) => {
    const newValue = parseInt(event.target.value, 10);
    si (!isNaN(nouvelleValeur)) {
      setFactorValue(nouvelleValue);
      handleSubmit (nouvelle valeur);
    } autre {
      setFactorValue("");
    }
  } ;

    const handleSubmit = async(value) => {
      essayer{
         si (valeur >= 1 && valeur <= 100) {
            setValidationError("");
            attendre ConfigService.setConfig(valeur);
         }
      }attraper(erreur){
         console.log(erreur);
      }
    } ;

  retour (
          {//code démo}
          <div className="displayFlex">
            <label htmlFor="factor">Facteur :</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>
          {//du code}
  );
} ;

exporter la configuration par défaut;

Answer 1

Le rebond semble être la bonne solution pour vous. Lire la suite

Un hook React est disponible. ici.