javascript - 在反应js中使图像打开url onclick

问题描述

嗨，我有这段代码使用状态和钩子做出反应，我从反应 js 开始，不知道如何在不删除 useState 的情况下让我的图像将用户引导到 url onClick 事件，我认为这很容易实现。我提供了下面的代码示例，它由 3 个单独的文件组成。

// filename == Portfolio.jsx
import { useEffect, useState } from "react";
import PortfolioList from "../portfolioList/PortfolioList";
import "./portfolio.scss";
import {
  featuredPortfolio,
  webPortfolio,
  mobilePortfolio,
  designPortfolio,
  contentPortfolio,
} from "../../data";

export default function Portfolio() {
  const [selected, setSelected] = useState("featured");
  const [data, setData] = useState([]);
  const list = [
    {
      id: "featured",
      title: "Featured",
    },
    {
      id: "web",
      title: "Web App",
    },

// filename == data.jsx
export const featuredPortfolio = [
  {
    id: 1,
    title: "Social Media App",
    img:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvdHn8GmPGCO0y3SJqNHACygpm0h9VycMHg&usqp=CAU",
  },
  {
    id: 2,
    title: "Rampa UI Design",
    img:
      "https://cdn.dribbble.com/users/702789/screenshots/15054318/media/4ea5d492b7b07eebc9528ff960794879.png?compress=1&resize=1200x900",
  },
 
 // filename == PortfolioList
  export default function PortfolioList({ id, title, active, setSelected }) {
  return (
    <li
      className={active ? "portfolioList active" : "portfolioList"}
      onClick={() => setSelected(id)}
    >
      {title}
    </li>
  );
}

标签： javascriptreactjsjsx

首先，我感谢您花时间评估我的问题。

我测试了几种解决方案，最简单的一个就是在 Javascript 对象数组上包含链接，这是我在其中的 JSON 格式文件。

我将在下面添加示例代码以澄清。

export default function Works() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const data = [
    {
      id: "1",
      icon: "./assets/mobile.png",
      title: "Mobile App Design",
      desc:
        "I have good mobile design skills, ready to deliver a good service to you. ",
      img:
        "https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930",
  // this is the line that need addition since the hooks of useState manages the onClick action
      a: "https://www.figma.com/proto/rJnb39KhEdW6lVU6zlzPtS/ElectricityCalculatorApp?node-id=9%3A0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=9%3A0",
    },

javascript - 在反应js中使图像打开url onclick

问题描述

解决方案

推荐阅读