<p>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. </p><p>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). </p><p>Je souhaite que lors du passage de 1 à 50, seuls 50 soient envoyés au backend dans handleSubmit. </p><p>J'ai essayé ce code mais il n'a pas fonctionné, aidez-nous à le résoudre.</p><p><br /></p> <pre class="brush:php;toolbar:false;">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;</pre> <p><br /></p>