Cara menggunakan onClick untuk menghantar data dalam React Hooks
P粉615886660
P粉615886660 2023-08-31 13:43:40
0
1
559
<p>Bagaimanakah saya menghantar data daripada <code>blogItem.js</code> komponen ke <code>blogDetails.js</code> Walau bagaimanapun, komponen blogItem diimport dalam komponen Home.js. Sila beritahu saya di mana saya harus menambah tindakan klik? Bolehkah sesiapa berkongsi contoh? </p> <p>Pautan CodeSandboX https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876</p> <pre class="brush:php;toolbar:false;">// 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;</pre> <p>// BlogDetails.js</p> <pre class="brush:php;toolbar:false;">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;</pre></p>
P粉615886660
P粉615886660

membalas semua(1)
P粉043566314

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
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan