マウスが離れる前にすべての値をコミットするのではなく、マウスが離れたときにスライダーの値をコミットするにはどうすればよいですか?

Question

<p>入力フィールドとスライダーがあります。スライダーの範囲は 1 ～ 100 です。トグル スイッチとドロップダウン メニューもあるので、スライダーを含む送信ボタンを使用する代わりに、各フィールドに onChange イベントを使用しています。 </p><p>しかし、問題が発生しました。スライダーを 1 から 50 まで変更しようとすると、1 から 50 までのすべての値が onChange イベントで送信されます。 onSlideEndイベントを使用してみましたが、古い値が表示されます（例：1から50を選択すると1が表示され、50から20を選択すると50が表示されます）。 </p><p>1 から 50 に変更する際に、handleSubmit で 50 のみがバックエンドに送信されるようにしたいです。 </p><p>このコードを試してみましたが、うまくいきませんでした。解決してください。</p>

<pre class="brush:php;toolbar:false;">import React, { useEffect, useState } from 'react'; 「primereact/slider」から { Slider } をインポートします。 import {InputText} から "primereact/inputtext"; //一部のインポート const 構成 = () => { const [factorvalue, setFactorValue] = useState(1); const [isSliderDragging, setIsSliderDragging] = useState(false); useEffect(() => { fetchConfig(); }、[]); const fetchConfig = async () => { 試す { // これはバックエンドから設定値を取得してフロントに設定するために使用されます const 応答 = await Service.getMaliciousFactorConfig(); if (応答) { const maliciousFactorValue = 応答[0].maliciousFactor || 1; setFactorValue(maliciousFactorValue); } } キャッチ (エラー) { コンソール.ログ(エラー.メッセージ); } }; const handleSliderChange = (イベント) => { 試す{ const newValue = parseInt(event.value, 10); setFactorValue(newValue); handleSubmit(newValue); }キャッチ(エラー){ コンソール.ログ(エラー); } }; const handleSliderDragEnd = (イベント) => { setIsSliderDragging(false); }; const handleInputChange = (イベント) => { const newValue = parseInt(event.target.value, 10); if (!isNaN(newValue)) { setFactorValue(newValue); handleSubmit(newValue); } それ以外 { setFactorValue(""); } }; const handleSubmit = async(value) => { 試す{ if (値 >= 1 && 値 <= 100) { setValidationError(""); await ConfigService.setConfig(value); } }キャッチ(エラー){ コンソール.ログ(エラー); } }; 戻る （ {//デモコード} <div className="displayFlex"> <label htmlFor="factor">因子:</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> {//コード} ); }; デフォルトの構成をエクスポート;</pre> <p><br /></p>

Answer 1

デバウンスはあなたにとって正しい解決策のようです。 。 ＃＃＃続きを読む＃＃＃＃＃＃ React フックが利用可能です。 ＃＃＃ここ＃＃＃。＃＃＃