在 React 中，自定义组件（如 ）不会自动继承 DOM 事件监听能力；必须显式接收并透传 onClick 等事件处理函数到内部原生元素（如 ），否则点击无响应、无报错、无日志。

在 react 中，自定义组件（如 ``）不会自动继承 dom 事件监听能力；必须显式接收并透传 `onclick` 等事件处理函数到内部原生元素（如 ``），否则点击无响应、无报错、无日志。

React 的事件系统仅作用于原生 DOM 元素（如 、

、）。当你写 时，onClick 只是作为普通 prop 传入组件，若组件内部未主动使用它，该事件便完全被忽略——这正是你遇到“点击无日志、无报错、状态不更新”的根本原因。

✅ 正确做法：在 AddTaskBtn 组件中接收 onClick，并将其绑定到一个可交互的原生元素上。例如：

// AddTaskBtn.jsx
const AddTaskBtn = ({ onClick, children = "Add Task" }) => {
  return (
    <button 
      type="button" 
      onClick={onClick}
      className="add-task-btn"
    >
      {children}
    </button>
  );
};

export default AddTaskBtn;

⚠️ 注意事项：

Reactivation Specialist · 流失召回

适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

下载

• 始终为

添加 type="button"，避免表单默认提交行为；

不要解构或重命名 onClick（如写成 onPress），除非你同时在组件内做统一封装和转发；

若 AddTaskBtn 内部是多层嵌套结构（如含图标、文字容器），确保 onClick 最终绑定在最外层可交互元素或使用 role="button" + tabIndex 实现键盘可访问性；

使用 console.log 调试时，建议在 openModal 中添加 console.log("openModal triggered")，而非仅依赖按钮点击日志——这样能明确区分是事件未触发，还是逻辑未执行。

完整修复后的 Nav 组件保持不变（你原本的写法已正确），只需确保 AddTaskBtn 按上述方式实现即可：

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

  const openModal = () => {
    setShowModal(prev => !prev); // 推荐用 prev 形式，更安全
    console.log("Modal toggle triggered");
  };

  return (
    <header>
      <div>
        <div>
          <AddTaskBtn onClick={openModal} /> {/* ✅ 此处传递正确 */}
        </div>
      </div>
      <Modal showModal={showModal} setShowModal={setShowModal} />
    </header>
  );
}

总结：React 中「事件透传」不是自动行为，而是开发者责任。只要记住口诀——“自定义组件不响应事件，除非你亲手把它连到 DOM 上”，就能避开 90% 的点击失效问题。