在 React 组件中添加淡入淡出/动画<Button>

Question

目前我已经创建了一个授权组件，在接受对表单进行的新更改之前，该组件会检查本地AD用户名/密码；"认证"；，在验证用户之前，该函数需要几秒钟的时间才能运行。由于该按钮不会设置动画或淡出，因此用户可以多次单击该按钮以引发问题。

我试图实现一个简单的淡入淡出/动画按钮，但有一个困难的时间实现一些建议。如果您有任何关于如何实现或研究React插件的提示，我们将不胜感激。

<DialogActions>
<Button onClick={() => props.onClose(ConfirmationDialogButtons.CANCEL)} color="primary">
Cancel
</Button>
<Button onClick={handleSign} color="primary">
Authenticate
</Button>
</DialogActions>

这是onClick={handleSign}代码。

const handleSign = async () => {
const srv = new DataServer()
const result = await srv.eSignature(formData.userId, formData.password, props.securityArea, props.prompt, formData.comment)
if(result.error === 0) {
sessionStorage.setItem("Authenticated" , JSON.stringify({Authenticated : true , time : new Date()}))
props.onClose(ConfirmationDialogButtons.OK)
}
else {
setSignError(result.error)
}
}

Answer 1

您可以使用类似材料ui的组件库，它可以为您的自动淡化按钮