Как отключить кнопку реакции, пока не закончится Meteor Method - PullRequest
Новая
       24

Как отключить кнопку реакции, пока не закончится Meteor Method

1 голос
/ 14 октября 2019

У меня есть приложение Meteor с компонентом реагирования, в котором есть кнопка, запускающая асинхронный метод метеора.

Этот метод требует времени для запуска, и я хочу предотвратить повторный щелчок по нему во время ожидания ответа. Я могу отключить кнопку в обработчике кликов, но как только функция завершится, я не могу снова включить ее, поскольку «this» (будучи компонентом реакции) неизвестно для функции обратного вызова.

Есть какие-нибудь идеи о том, как изменить реагирующий элемент при обратном вызове метода?

Ответы [ 2 ]

0 голосов
/ 17 октября 2019 

import React, {useState} from "react"

const SampleAsync = () => {

  let [isWaiting, setWaiting ] = useState(false)

  let meteorMethod = () => {
      setWaiting(true)
      Meteor.call('insertSometing', data,(result,error) => {
        if(error) 
        console.log('erro')
        else
        setWaiting(false)
      })
  }


  // If isWaiting is true the button disable and if false unable
  // you can also do this: <button disable={isWaiting} onClick={meteorMethod}>Submit</button>
  return (
    <div>
      // you can add inline if
      <button disable={isWaiting == true ? true : false  } onClick={meteorMethod}>Submit</button>
    </div>
  )
}

export default SampleAsync
0 голосов
/ 14 октября 2019

Я бы создал логическое значение в вашем локальном состоянии, например isWaiting: false, и в функции внутри вашего обработчика событий (ваш метод асинхронного метеора), после нажатия этой кнопки значение isWaiting должно измениться на true. И в зависимости от того, какой шаблон вы выберете (асинхронный / ожидающий или обещание), я бы установил isWaiting обратно в false как при успешном, так и при отклонении. После этого атрибут disable зависит от состояния isWaiting.

Вы можете использовать try-catch-finally: 

const [isWaiting, setIsWaiting] = useState(false);

async function meteorMethod() {
  setIsWaiting(true)
  try {
    // await...
  } catch(err) {
    // ...
  }
  finally {
    setIsWaiting(false)
  }
}

return (
  <>
    <button disable={isWaiting} onClick={meteorMethod}>Submit</button>
  </>
)
...