Cara menggunakan onClick untuk menghantar data dalam React Hooks
P粉615886660
2023-08-31 13:43:40
<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>
Mula-mula, buat
dan buatbrowserRouter
dalam fail index.js dan alih keluarnya daripada failbrowserRouter
,并从app.js文件中移除它,并为BlogDetailscomponent
创建一个Route
app.jskomponen
untukBlogDetails
kod>Route:useNavigate
Import dalam failBlogItem.js
element
添加onClick
,以便重定向到/blogDetails
:Kini anda boleh berikan yang ingin anda klik, contohnya:
Akhir sekali, dalam failBlogDetails.js
: 🎜 🎜Anda boleh mengakses data yang diluluskan seperti ini: 🎜