使用daisyUI时，点击Add按钮后如何关闭模态框？

我正在使用daisyUI进行开发，模态框内的表单用于向数据库上传数据，目前上传功能已正常运行，但不清楚点击Add按钮后如何关闭该模态框。相关代码如下：

<label htmlFor="add-doc" className="btn btn-sm btn-success ml-auto mb-3">
        Tambah Dokumen
      </label>
      <input type="checkbox" id="add-doc" className="modal-toggle" />
      <div className="modal">
        <div className="modal-box">
          <h3 className="font-bold text-lg mb-5">Tambah Dokumen</h3>
          <div className="form-control">
            <label className="input-group mb-5">
              <span>Nama Dokumen</span>
              <input
                type="text"
                placeholder="nama dokumen"
                className="input input-bordered"
                name="namaDoc"
                onChange={fieldHandler}
              />
            </label>
            <label className="input-group mb-3">
              <span>Lokasi Dokumen</span>
              <input
                type="text"
                placeholder="Lokasi dokumen"
                className="input input-bordered"
                name="lokasiDoc"
                onChange={fieldHandler}
              />
            </label>
            <label className="label">
              <span className="label-text">Masukkan foto ruangan lokasi</span>
            </label>

            <input
              type="file"
              className="file-input w-full max-w-xs"
              name="fotoLok"
              // onChange={fieldHandler}
            />
          </div>
          <div className="modal-action">
            <label htmlFor="add-doc" className="btn">
              Cancel{" "}
            </label>

            <label
              onClick={handleDocSubmit.bind(this)}
              htmlFor="add-doc"
              className="btn btn-success"
            >
              <button>Add</button>
            </label>
          </div>
        </div>
      </div>

daisyUI的模态框依赖modal-toggle类的checkbox控制显示/隐藏，针对你的场景，有几种可行的处理方式：

1. 修正标签嵌套问题（最简单方案） #

你当前的Add按钮外层是绑定了htmlFor="add-doc"的<label>，但内层又嵌套了<button>，这会导致点击事件冲突，无法正常触发checkbox状态切换。直接移除内层<button>，把Add文本放在label里即可：

<label
  onClick={handleDocSubmit.bind(this)}
  htmlFor="add-doc"
  className="btn btn-success"
>
  Add
</label>

点击label时会同时触发表单提交逻辑和checkbox状态切换，自动关闭模态框。

2. 异步提交后关闭（适合等待上传完成的场景） #

如果handleDocSubmit是异步操作（比如向数据库发请求），需要等上传成功后再关闭模态框，可以手动修改checkbox的选中状态：

function handleDocSubmit() {
  // 执行上传逻辑，示例用fetch发送请求
  fetch('/your-upload-api', {
    method: 'POST',
    // 补充表单数据、headers等请求配置
  })
  .then(response => response.json())
  .then(() => {
    // 上传成功后关闭模态框
    document.getElementById('add-doc').checked = false;
  })
  .catch(error => console.error('上传失败:', error));
}

同时要移除Add按钮外层label的htmlFor="add-doc"，避免点击时提前关闭模态框：

<button
  onClick={handleDocSubmit.bind(this)}
  className="btn btn-success"
>
  Add
</button>

3. React环境下的状态控制（更优雅方案） #

如果是React项目，建议用组件状态控制模态框，摆脱原生checkbox依赖：

import { useState } from 'react';

function YourComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleDocSubmit = () => {
    // 执行上传逻辑
    fetch('/your-upload-api', { /* 请求配置 */ })
      .then(res => res.json())
      .then(() => {
        setIsModalOpen(false); // 上传成功后关闭模态框
      });
  };

  return (
    <>
      <label 
        onClick={() => setIsModalOpen(true)} 
        className="btn btn-sm btn-success ml-auto mb-3"
      >
        Tambah Dokumen
      </label>
      <input 
        type="checkbox" 
        id="add-doc" 
        className="modal-toggle" 
        checked={isModalOpen}
        onChange={(e) => setIsModalOpen(e.target.checked)}
      />
      <div className="modal">
        <div className="modal-box">
          {/* 保留原有表单内容 */}
          <div className="modal-action">
            <label onClick={() => setIsModalOpen(false)} className="btn">
              Cancel
            </label>
            <button onClick={handleDocSubmit} className="btn btn-success">
              Add
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Muhammad Yafi A