如何禁用反应按钮，直到流星方法完成

Question

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

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

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

Answer 1

我会在您的本地状态(如isWaiting: false和事件处理程序(您的异步流星方法(中的函数中创建一个布尔值，一旦单击该按钮，它应该将isWaiting值更改为true.根据你选择的模式(异步/等待或承诺(，我会在成功和拒绝时将isWaiting设置回 false。之后，让disable属性依赖于isWaiting状态。

您可以使用 try-catch-final：

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>
</>
)

Answer 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