React中传递带事件与参数的函数给子组件时事件获取失败问题

错误原因 #

出现Uncaught TypeError: e.preventDefault is not a function的核心原因是事件对象未被正确传递到权限检查函数中。当前子组件的嵌套箭头函数写法看似传递了e，但可能因函数调用上下文或事件绑定场景（比如子组件的onClick未绑定在原生DOM元素上）导致事件对象异常。

解决方案 #

方案1：父组件提前绑定参数，传递完整事件处理函数 #

在父组件内先将link、title、hasPermissions参数绑定到权限函数，生成完整的事件处理函数后再传给子组件，避免子组件嵌套调用：

// 父组件内
const handleNavClick = openModalOrFollowLink(link, title, hasPermissions);

// 传递给子组件
<NavigationItem onClick={handleNavClick} link={link} title={title} />

子组件直接使用传递的处理函数，无需额外包装：

// 子组件内
<a onClick={props.onClick} href={props.link}>
  {props.title}
</a>

这种写法能确保原生事件对象直接传入openModalOrFollowLink返回的处理函数，正常调用e.preventDefault()。

方案2：调整权限函数结构，直接接收事件对象 #

修改父组件的权限检查函数，取消柯里化，将事件对象作为第一个参数：

// 父组件内修改后的函数
const openModalOrFollowLink = (e, link, title, hasPermissions) => {
  e.preventDefault();

  if (hasPermissions) {
    // setSomeState(title)
    setModalVisible(true);
  } else {
    history.push(link); // 修正原代码笔误：将target替换为传入的link
  }
};

子组件调用时直接传递事件对象和所需参数：

// 子组件内
onClick={(e) => openModalOrFollowLink(e, link, title, hasPermissions)}

这种写法更直观，能明确确保事件对象被正确传入函数。

额外注意事项 #

• 修正原代码笔误：父函数内的history.push(target)中，参数列表无target，需替换为传入的link，否则无权限时会跳转失败。
• 确保子组件的onClick绑定在原生DOM元素（如<a>、<button>）上，若为自定义组件的自定义事件，需在自定义组件内部手动传递原生事件对象。

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