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

Question

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

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

关于如何在方法回调上修改反应元素有什么想法吗？

Answer 1

我会在你的本地状态中创建一个布尔值，比如 isWaiting: false 并在你的事件处理程序中的函数（你的异步流星方法）中，一旦该按钮被点击它应该改变 isWaiting值 true。根据您选择的模式（async/await 或承诺），我会在成功和拒绝时将 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>
  </>
)

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

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

How to disable react button until Meteor Method finishes

asynchronous

meteor

reactjs