我希望为此提交功能添加进度侦听器或反馈，以使用户知道任务何时完成

Question

我希望使用或任何材料-UI反馈组件来捕获表单的提交进度

const onSubmit = (e) => {
    e.preventDefault();
    if (eventImage) {
        const uploadImage = storage.ref(`EventImages/${values.eventName}`)
        uploadImage.put(eventImage).then(() => {
            storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url => {
                dbref.add({
                    eventName: values.eventName,
                    eventVenue: values.eventVenue,
                    eventAddress: values.eventAddress,
                    eventCategory: values.eventCategory,
                    eventOrganizer: values.eventOrganizer,
                    eventPhone: values.eventPhone,
                    eventEmail: values.eventEmail,
                    eventDetails: values.eventDetails,
                    eventDate: selectedDate.toDateString(),
                    eventTime: selectedDate.toLocaleTimeString(),
                    eventImgUrl: url
                }).then((docRef) => {
                    console.log("Document written with ID: ", docRef.id);
                    setValues("");
                    setImg("");
                    setImgName("");
                }).catch((error) => {
                    console.error("Error adding document: ", error);
                });
            })
        })
    }
    }

我希望使用任何材料-UI 反馈组件来实现这一点

Answer 1

通常在这种情况下

使用进度条，以便用户知道任务已完成/剩余多少。

IMO显示完成百分比和/或剩余时间是有帮助的。(时间有点难以实现(

材质 UI 进度条 ： https://material-ui.com/components/progress/#linear-buffer

这可能会有所帮助？

他们还有一个附有源代码的示例。如果您需要更多信息，请告诉我