我有這段代碼，我在回圈post陣列中提取comments
const [commentOptions, setCommentOptions] = useState(false);
return(
...
{post.comments.map((comment) => (
<div className="comments" key={comment._id}>
<div className="commentUserImageAndUsername">
<img
className="commentUserImg"
src={
comment.userId === users._id
? users.profileImg || `${PF}/profile.jpg`
: null
}
alt="comment user "
/>
{comment.userId === users._id ? users.firstname : null}
</div>
<div className="commentBody">{comment.body}</div>
{user._id === comment.userId ? (
<div
className="commentOptionsMark"
onClick={() => setCommentOptions(!commentOptions)}
> - </div>
) : null}
{commentOptions ? (
<div className="commentOptions">
<div className="deleteComment">Delete</div>
<div className="editComment">Edit</div>
</div>
) : null}
</div>
))}
...
)
對于每個comment我有hyphen標記-，如果我單擊它，它會將commentOptions狀態設定為 true，因此commentOptions div將出現，其中包含 2 個選項，delete comment并且edit comment問題是，如果我單擊hyphen mark一個評論，commentOptions div每個評論都會出現評論，就像如果有 5 條評論并且每條評論都有自己的選項，我可以commentOptions div通過單擊來控制每條評論的外觀，這不是我想要的，我想hyphen -在點擊時為每條評論顯示一個 div，而不是所有這些，就像每條評論本身一樣，如何解決這個問題？
uj5u.com熱心網友回復：
存盤單擊的評論 id 以進行控制：
const [shownCommentId, setShownCommentId] = useState('');
{user._id === comment.userId ? (
<div
className="commentOptionsMark"
onClick={() => setShownCommentId(comment._id)}
> - </div>
) : null}
然后控制地圖中的 id：
{shownCommentId === comment._id ? (
<div className="commentOptions">
<div className="deleteComment">Delete</div>
<div className="editComment">Edit</div>
</div>
) : null}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/454300.html