Question

我希望使用或任何Material-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);
                });
            })
        })

    }
    }

我希望使用任何Material-UI反馈组件来实现这一目标

Answer 1

通常在这种情况下使用进度条，以便用户知道有多少任务已完成/尚待完成。

IMO显示完成百分比和/或剩余时间对您有帮助。（时间很难实现）

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

这可能有帮助吗？

他们还有一个附带源代码的示例。让我知道您是否需要更多信息

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

1 个答案: