weixin_44157032 2022-10-24 23:14 采纳率: 68.8%
浏览 28
已结题

React 如何实现点击图片后进入图片详情页

我调用API获取到所有图片后渲染到页面上,之后我想点击某个图片就可以跳转到一个新的页面,那个页面上包含被点击图片的某些属性,如src,id,name等等。

以下是部分代码,请问该如何修改handleClick方法呢?

//调用API后将图片渲染到页面上
function CustomContent() {
    const [customContent, setCustomContentResults] = useState([])

    const fetchData = async() => {...}

    useEffect(...)

    const handleClick=(post)=>{
     
    }
    const content = customContent?.map(post => {
        return <li key={post.id}>
                <div>
                    <img alt="" src={post.src.medium} onClick={() => handleClick(post)}></img>
                </div>
            </li>
    })
    return (
        <div >
            <ul>
                {content}
            </ul>
        </div>
    )
}

export default CustomContent
  • 写回答

2条回答 默认 最新

  • 经海路大白狗 前端领域优质创作者 2022-10-25 00:20
    关注
    
    
    ```javascript
    const handleClick=(post)=>{
         const {src, id, name} = post;
        window.location.href = `http://m.tb.com?id=${id}&name=${name}&src=${src}`;
     }
    不过src那里最好编码一下
    
    
    

    ```

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月25日
  • 已采纳回答 10月25日
  • 修改了问题 10月24日
  • 创建了问题 10月24日

悬赏问题

  • ¥15 如何对参数分析结构进行绘图
  • ¥15 做一个满足376和698规约的集中器程序
  • ¥50 python如何用抖音这个接口输入抖音ID查询用户信息
  • ¥30 关于移动Web网页使用TinyMCE富文本编辑器上传图片后的光标定位、压缩等几个问题如何解决:
  • ¥40 activeMq在同服务器centos8下消费很慢
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗