React提交与编辑表单使用的Modal组件无法关闭是什么原因？

问题根因 #

你的Modal显示完全依赖CSS的:target伪类规则，只有当页面URL的hash值为#contact-form时，.contact-form元素才会设置为可见，目前无法关闭是多个问题共同导致的：

• clearContactForm函数的逻辑仅在存在编辑中的当前联系人（current不为空）时执行clearCurrentContact，没有任何处理Modal可见性的逻辑，且这个函数本身也不会改变页面hash值，不可能触发:target的状态切换
• Cancel按钮外层嵌套了<a href="#!">标签，点击按钮时首先会触发a标签的默认跳转行为，就算你写了onClick逻辑，也没有阻止a标签的默认事件，就算跳转后hash变为#!，也没有对应处理让Modal隐藏的逻辑
• 你当前的Modal显示逻辑完全由原生CSS控制，和React状态没有关联，单纯修改React内部状态不可能控制Modal的显示隐藏

修复方案 #

可选任意一种方案修复：

方案1：保留CSS :target控制逻辑，修改关闭按钮 #

直接把Cancel按钮外层的a标签的href改为#，点击后hash清空，:target规则失效自然隐藏Modal，同时调整清理函数逻辑：

// 关闭按钮修改
<div>
  <a href="#">
    <button
      className="button button-form-clear"
      onClick={clearContactForm}
    >
      Cancel
    </button>
  </a>
</div>

// 清理函数调整，确保无论是否有编辑中的联系人都执行清理
const clearContactForm = () => {
  clearCurrentContact();
};

方案2：改用React状态控制Modal显隐（更符合React开发规范） #

新增状态控制Modal显示，完全替换CSS的:target规则：

1. 新增显隐状态

const [showModal, setShowModal] = useState(false);

2. 修改打开按钮逻辑，去掉外层a标签

<button 
  className="create-contact-button" 
  onClick={() => setShowModal(true)}
>+</button>

3. 修改form的显隐控制，删除CSS中.contact-form:target相关规则，改用状态绑定样式

<form 
  className="contact-form" 
  id="contact-form" 
  onSubmit={onSubmit}
  style={{visibility: showModal ? 'visible' : 'hidden'}}
>

4. 关闭按钮点击时同步更新状态

<button
  className="button button-form-clear"
  onClick={() => {
    clearContactForm();
    setShowModal(false);
  }}
>
  Cancel
</button>

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