Реакция - Как сделать кнопку (которая предотвращает двойной щелчок при обработке HTTP-запросов)

Question

** пробуя следующее Кнопка сначала будет отключена при срабатывании обещания. Он останется отключенным до тех пор, пока обещание не разрешится, а затем снова будет включено. Посоветуйте, пожалуйста, как я застрял здесь и не уверен, что это правильно **

let [enabled] = useState(false);
const getTotal = event => {
        enabled = false;
        calTotal().then(validateResult => {
           // enabled = true;
        });
    }
    <Button 
    onClick={() => new Promise((resolve) => {
              resolve({
                      getTotal();
                     })
                 })}>Get Total</Button>

Answer 1

Есть несколько вещей, которые следует учитывать:

1. Вы неправильно устанавливаете состояние enabled - вам нужно использовать функцию из useState hook
2. Вам не нужно оборачивать onClick в обещание
3. Вы не привязываете свойство disabled к кнопке с вашей переменной enable
4. Ваше начальное состояние enabled должно быть true, чтобы чтобы можно было нажать кнопку

См. настройки здесь:

let [enabled, setEnabled] = useState(true);
const getTotal = event => {
    setEnabled(false)
    calTotal().then(validateResult => {
       setEnabled(true)
    });
}
<Button disabled={!enabled} onClick={() => getTotal()}>Get Total</Button>