Ken428965 2022-12-07 08:27 采纳率: 53.4%
浏览 39
已结题

react,对List列表的删除效果如何实现?

在使用的react版本如下:

img


已写的代码:

import { CloseCircleOutline } from 'antd-mobile-icons'
const Favorite = () => {
  const [favorite, setFavorite] = useState([])
API.get(`/user/favorites`).then(res => {
      setFavorite(res.data.body)
    })
  const deleteFavorite = (e) => {
    let index = e.target.getAttribute("data-index")
    favorite.splice(index, 1, "")
    setFavorite(favorite)
  }
  return (<>
      <div className={styles.root}>
      {/* 房屋列表 */}
      <List>
        {favorite.map((item) => (
          <List.Item 
            key={item.desc} 
            prefix={<Image src={BASE_URL + item.houseImg} style={{ borderRadius: 0 }} fit='cover' width={80} height={80}/>} 
            title={item.title}
            description={item.price + '元/月'} 
            onClick={()=>navigate(`/detail/${item.houseCode}`)}
            arrow={false}>
              <div className={styles.desc}>{item.desc}</div>
              </div>
              <span className={styles.delete} data-index={item.index} onClick={deleteFavorite}><CloseCircleOutline /></span>
          </List.Item>
        ))}
      </List>
    </div>
  )
}

目前效果如下,删除按钮可成功显示出来,然而,点击其中一项里的删除按钮后进入了该项目的详情页面,而没有把该项目删除:

img

请问以上代码这样写有哪些地方写得不对?请展示代码举例说明,谢谢。

展开全部

  • 写回答

1条回答 默认 最新

  • 明先生啊。 2022-12-07 08:39
    关注

    你在点击删除的时候触发了父节点的点击跳转事件,在点击删除的时候阻止冒泡就行。onClick={(e)=>{e.stopPropagation();deleteFavorite()}}

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月14日
  • 已采纳回答 12月9日
  • 创建了问题 12月7日

悬赏问题

  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交
  • ¥30 silcavo仿真,30分钟,只需要代码
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部