React项目中点击跳转锚点意外触发列表删除问题求助

问题根源： #

1. 事件冒泡：你把删除事件绑定在了整个ItemContainer上，点击容器内的任何元素（包括跳转链接）都会触发父容器的点击事件，导致误删。
2. 删除函数逻辑错误：原handleRemoveRepo里的过滤条件完全无效，repo.id !== repo.id永远为false，会清空所有列表项，且多余的if语句是语法错误。

分步修正： #

1. 修复删除函数逻辑

替换原handleRemoveRepo为正确的过滤逻辑：

const handleRemoveRepo = (id) => {
  // 过滤掉id匹配的项，返回新数组
  const updatedRepos = repos.filter(repo => repo.id !== id);
  setRepos(updatedRepos);
};

2. 调整列表项的事件绑定

把删除事件从父容器ItemContainer移到“Remover”锚点上，同时移除父容器的onClick：

// ItemRepo组件代码
<ItemContainer>
  <h3>{repo.name}</h3>
  <p>{repo.full_name}</p>
  {/* 跳转链接添加安全属性，防止新页面安全风险 */}
  <a href={repo.html_url} target="_blank" rel="noopener noreferrer">Ver repositório</a> <br />
  {/* 删除按钮绑定点击事件，阻止默认锚点跳转 */}
  <a 
    href="#" 
    className="remove"
    onClick={(e) => {
      e.preventDefault(); // 阻止点击#导致的页面滚动
      handleRemoveRepo(repo.id); // 调用删除函数，传入当前项的id
    }}
  >Remover</a>
  <hr />
</ItemContainer>

3. 给列表项添加唯一Key（React规范要求）

在父组件渲染列表时，给每个ItemRepo添加key属性：

<Container>
  {repos.map(repo => <ItemRepo handleRemoveRepo={handleRemoveRepo} repo={repo} key={repo.id} />)}  
</Container>

为什么这样改： #

• 把删除事件绑定到具体按钮上，避免容器内其他元素触发误操作
• 修复过滤逻辑，确保只删除目标项
• 添加rel="noopener noreferrer"是React跳转外部链接的安全最佳实践
• 阻止删除按钮的默认锚点行为，避免页面不必要的滚动

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