在 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

你可以使用像material ui 这样的组件库，它会自动淡出你的按钮