React项目中表单提交后如何编程式关闭Daisy UI模态框？

问题分析 #

你的模态框使用HTML5 <dialog>元素，当前Submit按钮通过onClick绑定handleSubmit，没有触发模态框的关闭逻辑。同时表单的method="dialog"仅在点击默认提交按钮时触发关闭，而你的提交逻辑是自定义的，因此需要手动处理关闭动作。

解决方案 #

通过以下3步修改代码，实现提交成功后关闭模态框：

• 添加useRef获取模态框DOM引用，用于手动控制关闭
• 将表单提交逻辑绑定到form的onSubmit事件，替代按钮的onClick，符合标准表单流程
• 在提交成功后调用模态框的close()方法

修改后的完整代码 #

import { useDispatch, useSelector } from "react-redux";
import { editRows } from "features/tableSlice";
import edit from "assets/pencilSquare.svg";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import editSchema from "utils/validations/form";
import toast from "react-hot-toast";
import { useRef, useEffect } from "react";

const EditModal = ({ currentRow }) => {
    const rows = useSelector((state) => state.rows);
    const dialogRef = useRef(null); // 获取模态框引用
    const {
        register,
        getValues,
        handleSubmit,
        formState: { isDirty, isValid, isSubmitting },
        setValue,
    } = useForm({
        resolver: yupResolver(editSchema),
    });
    const dispatch = useDispatch();

    useEffect(() => {
        if (currentRow && currentRow.length > 0) {
            const { priority, name } = currentRow[0];
            setValue("priority", priority);
            setValue("name", name);
        }
    }, [currentRow]);

    const submitHandler = () => {
        if (currentRow) {
            const { id } = currentRow[0];
            let priority = +getValues("priority");
            let name = getValues("name");
            const currentPriority = currentRow[0].priority;
            const isPriorityChanged = priority !== currentPriority;
            if (isPriorityChanged) {
                const isDuplicatePriority = rows.some(
                    (row) => row.priority === priority
                );
                if (isDuplicatePriority) {
                    toast.error(
                        "Duplicate priority! Please choose a different priority."
                    );
                    return;
                }
            }
            dispatch(editRows({ id, priority, name }));
            // 提交成功后关闭模态框
            dialogRef.current?.close();
        }
    };

    return (
        <dialog ref={dialogRef} id="my_modal_1" className="modal">
            <div className="modal-box">
                <div className="flex gap-2 items-center">
                    <h3 className="font-bold text-lg">Edit</h3>
                    <img src={edit} alt="edit" />
                </div>
                <p>Press ESC key or click the button below to close</p>
                <div className="modal-action">
                    {/* 将提交逻辑绑定到表单onSubmit事件 */}
                    <form onSubmit={handleSubmit(submitHandler)} className="m-auto">
                        <div className="flex flex-col m-auto">
                            <label className="input input-bordered input-sm flex items-center gap-2 my-3">
                                <input
                                    placeholder="Priority"
                                    type="number"
                                    className="grow"
                                    {...register("priority")}
                                />
                            </label>
                            <label className="input input-bordered input-sm flex items-center gap-2 my-3">
                                <input
                                    type="text"
                                    className="grow"
                                    placeholder="Name"
                                    {...register("name")}
                                />
                            </label>
                        </div>
                        {/* 添加type="button"避免触发表单提交 */}
                        <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 hover:bg-red-500 hover:text-white" type="button">
                            ✕
                        </button>
                        {/* 设置为submit类型按钮 */}
                        <button
                            disabled={!isDirty || !isValid || isSubmitting}
                            className="btn btn-wide btn-sm btn-primary"
                            type="submit"
                        >
                            Submit
                        </button>
                    </form>
                </div>
            </div>
        </dialog>
    );
};

export default EditModal;

关键修改说明 #

1. dialogRef引用：通过useRef获取模态框DOM实例，实现手动关闭控制
2. 表单onSubmit绑定：这是React Hook Form推荐的提交方式，同时遵循HTML表单的标准行为
3. 关闭按钮类型设置：添加type="button"防止点击关闭按钮时误触提交逻辑
4. 提交后关闭模态框：在dispatch完成后调用close()方法，确保数据提交成功后关闭模态框

内容的提问来源于stack exchange，提问作者Parham Abolghasemi