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}{//beberapa kod} ); }; eksport Konfigurasi lalai;
Debouncing nampaknya penyelesaian yang tepat untuk anda. .Baca lagi
Terdapat cangkuk React disediakan.di sini.