onClick を使用して React Hooks にデータを渡す方法
<p>blogItem がクリックされたときに、<code>blogItem.js</code> コンポーネントから <code>blogDetails.js</code> コンポーネントにデータを渡すにはどうすればよいですか?ただし、blogItem コンポーネントは Home.js コンポーネントにインポートされます。クリックアクションをどこに追加すればよいか教えてください。誰か例を共有できますか? </p>
<p>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 } from "react-router-dom";
ホームを「./src/Home」からインポートします。
BlogItem を「./src/blogItem」からインポートします。
関数 App() {
戻る （
<div className="アプリ">
<ブラウザルーター>
<ルート>
<ルートパス="/"要素={<Home />}></Route>
<ルート パス="/blogItem" 要素={<BlogItem />}></Route>
</ルート>
</ブラウザルーター>
</div>
);
}
デフォルトのアプリをエクスポートします。
//ホーム.js
インポート「./styles.css」;
import React, { useState, useEffect, useCallback } from "react";
BlogItem を「./blogItem」からインポートします。
const ホーム = (小道具) => {
const [blogItem, setBlogItem] = useState(props);
useEffect(() => {
setBlogItem(props);
}, [小道具]);
戻る （
<div id="アプリ">
<ブログアイテム />
</div>
);
};
デフォルトのホームをエクスポートします。
// BlogItem.js
インポート「./styles.css」;
import React, { useState, useEffect, useCallback } from "react";
const blogData = [
{
ID:1、
日付: 「2023 年 1 月 25 日」、
写真: 「https://picsum.photos/80」、
見出し: 「Cypress セットアップ ブログ」、
ブログ詳細:
"最適な見出しをここに追加しました。最も関連性の高いデータがここに追加されました。史上最高。いつもここでプレーするのは得策ではないだろう。」
}、
{
ID:2、
日付: 「2022 年 1 月 22 日」、
写真: 「https://picsum.photos/80」、
見出し: "反応状態の詳細"、
ブログ詳細:
"最適な見出しをここに追加しました。最も関連性の高いデータがここに追加されました。史上最高。いつもここでプレーするのは得策ではないだろう。」
}
];
const BlogItem = ({ id, 日付, 写真, 見出し, blogDetails }) => {
const [searchResults, setSearchResults] = useState(blogData);
const [state, setState] = useState({ id, 日付, 写真, 見出し, blogDetails });
const 列 = () => (
<div className="blogItems">
<div className="行">
<div className="ブログエリア">
{searchResults.map(({ id, 日付, 写真, 見出し, blogDetails }) => (
<a key={id}>
<div className="blogImageSection">
ddd
<p>ブログの詳細</p>
<前>
<code>const データ = []; data.push("サッカー");</code>
</pre>
</div>
</div>
</div>
</div>
);
};
デフォルトの BlogDetails をエクスポート;</pre></p>
