如何在 Meteor Method 完成之前禁用反应按钮答案

【问题标题】：How to disable react button until Meteor Method finishes如何在 Meteor Method 完成之前禁用反应按钮
【发布时间】：2019-10-17 20:13:32
【问题描述】：

我有一个带有反应组件的 Meteor 应用程序，该应用程序有一个触发异步流星方法的按钮。

该方法需要一些时间才能运行，我希望防止在等待响应时再次单击它。我可以禁用单击处理程序中的按钮，但是一旦函数完成，我似乎无法重新启用它，因为回调函数不知道“this”（作为反应组件）。

关于如何在方法回调中修改反应元素的任何想法？

【问题讨论】：

标签： reactjs asynchronous meteor

【解决方案1】：

我会在您的本地状态中创建一个布尔值，例如 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>
  </>
)

【讨论】：

【解决方案2】：

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

【讨论】：