Cara menggunakan onClick untuk menghantar data dalam React Hooks

Question

Bagaimanakah saya menghantar data daripada blogItem.js komponen ke blogDetails.js Walau bagaimanapun, komponen blogItem diimport dalam komponen Home.js. Sila beritahu saya di mana saya harus menambah tindakan klik? Bolehkah sesiapa berkongsi contoh?

Pautan CodeSandboX https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876

// App.js

import { BrowserRouter, Route, Routes, Switch } daripada "react-router-dom";
import Rumah dari "./src/Home";
import BlogItem daripada "./src/blogItem";

function App() {
  kembali (
    <div className="App">
      <Penghala Penyemak Imbas>
        <Laluan>
          <Laluan laluan="/"elemen={<Laman Utama />}></Route>
          <Laluan laluan="/blogItem" elemen={<BlogItem />}></Route>
        </Laluan>
      </BrowserRouter>
    </div>
  );
}
eksport Apl lalai;

//Home.js

import "./styles.css";
import React, { useState, useEffect, useCallback } daripada "react";
import BlogItem daripada "./blogItem";
const Laman Utama = (props) =>
  const [blogItem, setBlogItem] = useState(props);

  useEffect(() => {
    setBlogItem(props);
  }, [props]);

  kembali (
    <div id="Apl">
      <BlogItem />
    </div>
  );
};

eksport Laman Utama lalai;
  
// BlogItem.js 

import "./styles.css";
import React, { useState, useEffect, useCallback } daripada "react";

const blogData = [
  {
    id: 1,
    tarikh: "25 Jan 2023",
    foto: "https://picsum.photos/80",
    tajuk: "Blog persediaan Cypress",
    blogButiran:
      "Tajuk terbaik ditambah di sini. Data yang paling relevan ditambah di sini. Terhebat sepanjang zaman. Bukan idea yang bagus bermain di sini sentiasa."
  },
  {
    id: 2,
    tarikh: "22 Jan 2022",
    foto: "https://picsum.photos/80",
    tajuk: "Bertindak balas butiran keadaan",
    blogButiran:
      "Tajuk terbaik ditambah di sini. Data yang paling relevan ditambah di sini. Terhebat sepanjang zaman. Bukan idea yang bagus bermain di sini sentiasa."
  }
];

const BlogItem = ({ id, tarikh, foto, tajuk, blogDetails }) => {
  const [searchResults, setSearchResults] = useState(blogData);

  const [state, setState] = useState({ id, tarikh, foto, tajuk, blogDetails });

  const Lajur = () => (
    <div className="blogItems">
      <div className="baris">
        <div className="blogArea">
          {searchResults.map(({ id, tarikh, foto, tajuk, blogDetails }) => (
            <a kunci={id}>
              <div className="blogImageSection">
                <img alt="id" src={foto} />
                <div key={id} className="dataArea">
                  <span className="dataDate">{date}</span>
                  <span className="tag">cypress</span>
                  <h3>{heading}</h3>
                  <p>
                    Tajuk terbaik ditambah di sini. Data yang paling relevan ditambah di sini.
                    Terhebat sepanjang zaman. Bukan idea yang baik bermain di sini sentiasa.
                  </p>
                  <a href="_blank" className="readmoreLink">
                    Baca lebih lanjut →
                  </a>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
  kembalikan <Lajur {...state} />;
};

eksport lalai BlogItem;

// BlogDetails.js

import React daripada "react";

const BlogDetails = () => {
  kembali (
    <div id="Apl">
      <div className="blogDetailsSection">
        <div className="baris">
          <div className="blog-individu">
            <h2>ddd</h2>
            <p>Butiran blog</p>
            <pra>
              <kod>data const = []; data.push("bola sepak");</code>
            </pra>
          </div>
        </div>
      </div>
    </div>
  );
};

eksport BlogDetails lalai;

Answer 1

Mula-mula, buat browserRouter dalam fail index.js dan alih keluarnya daripada fail browserRouter，并从app.js文件中移除它，并为BlogDetails component创建一个Routeapp.js

dan buat komponen untuk

BlogDetails

kod>Route：

<BrowserRouter>
  <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/blogItem" element={<BlogItem />}></Route>
      <Route path="/blogDetails" element={<BlogDetails />}></Route>
   </Routes>
</BrowserRouter>

Kemudian anda perlu memasang pakej 'react-router-dom'.

npm i react-router-dom

useNavigateImport

dalam fail

BlogItem.jselement添加onClick，以便重定向到/blogDetails:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate(); // 在函数组件内部使用

Kini anda boleh berikan yang ingin anda klik, contohnya:

<div className="blogImageSection"
onClick={() =>
  navigate('blogDetails', { state: {id, date, photo, heading, blogDetails } }) // 这是如何使用useNavigate传递数据的方法
}> ... </div>

Akhir sekali, dalam fail

BlogDetails.js

: 🎜

import { useLocation } from "react-router-dom";
const location = useLocation(); // 在函数组件内部使用

🎜Anda boleh mengakses data yang diluluskan seperti ini: 🎜

const myRecievedData = location.state