[英]onClick event not working within nested React / Next.js component
I can't seem to get the hideMoreDetails() function to work on this component.我似乎无法让 hideMoreDetails() 函数在这个组件上工作。 Nothing gets logged in the console and state remains unchanged when clicking on the 'close-more-info-cross' div.
单击“close-more-info-cross” div 时,控制台中不会记录任何内容,并且状态保持不变。
Any clue?有什么线索吗? Could it be a stacking issue?
会不会是堆叠问题?
import { useState } from "react";
import TracklistAndPlayer from "./TracklistAndPlayer";
function ReleaseEntry(props) {
const [playerDisplayId, setPlayerDisplayId] = useState(null);
const [showMoreDetails, setShowMoreDetails] = useState(true);
function showPlayer(event) {
setPlayerDisplayId(event.target.getAttribute("data-tag"));
}
function hideMoreDetails() {
console.log("hide more details");
setShowMoreDetails(false);
}
function renderSection(section) {
return (
<div className="section">
{section[0] && section.map(paragraph => <p>{paragraph.text}</p>)}
</div>
);
}
return (
props.releases &&
props.releases.map(function(release, index) {
let tracklist = Object.values(release.data.tracks[0]);
return (
<div>
<div className="release-entry-wrapper">
<div onClick={showPlayer}>
<img
className="release-cover"
key={`cover${index}`}
src={release.data.cover.url}
alt="release-cover"
data-tag={index}
/>
<div className="release-details">
<div
key={`artist${index}`}
className="artist-name"
data-tag={index}
>
{release.data.artist[0].text}
</div>
<div
key={`title${index}`}
className="release-name"
data-tag={index}
>
<img
className="mini-play"
src="/img/play-song.png"
alt="mini-play"
data-tag={index}
/>
{release.data.title[0].text}
</div>
</div>
</div>
{parseInt(playerDisplayId) === index && showMoreDetails && (
<div>
{
<div className="more-info-about-release">
<img
className="close-more-info-cross"
src="/img/cross.png"
alt="cross"
onCLick={hideMoreDetails}
/>
<div className="tracklist-details">
{renderSection(release.data.tracklist)}
</div>
<div className="about-release">
{renderSection(release.data.about)}
</div>
<div className="credits">
{renderSection(release.data.credits)}
</div>
</div>
}
<TracklistAndPlayer
tracklist={tracklist}
setPlayerDisplayId={setPlayerDisplayId}
/>
</div>
)}
</div>
<style jsx>{`
.release-entry-wrapper {
padding-left: var(--global-margin);
padding-right: var(--global-margin);
font-family: var(--font1);
font-size: var(--standard-font-size);
text-transform: uppercase;
}
.release-cover {
cursor: pointer;
width: 100%;
transition: transform 0.5s;
}
.release-cover:hover {
transform: scale(1.005);
}
.release-details {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
text-align: center;
letter-spacing: 0.05rem;
transition: opacity 0.3s;
transition: transform 0.5s;
cursor: pointer;
}
.release-details:hover {
opacity: 0.85;
transform: scale(1.01);
}
.mini-play {
width: 0.5rem;
margin-right: 0.7rem;
}
.artist-name,
.release-name {
padding-top: 0.5rem;
padding-bottom: 0.3rem;
}
.tracklist-details {
margin-bottom: 2rem;
}
.close-more-info-cross {
width: 0.6rem;
position: absolute;
right: 0;
top: 0;
transition: transform 0.3s;
opacity: 0.7;
cursor: pointer;
}
.close-more-info-cross:hover {
width: 0.7rem;
opacity: 1;
}
.more-info-about-release {
text-transform: none;
margin-bottom: 2rem;
position: relative;
}
.more-info-section-title {
margin-bottom: 1rem;
margin-top: 1rem;
}
.about-release {
margin-bottom: 2rem;
}
`}</style>
</div>
);
})
);
}
export default ReleaseEntry;
PS : link to the entire project: https://github.com/jeremieemk/elis-records-website PS:整个项目的链接: https ://github.com/jeremieemk/elis-records-website
You have a small typo on your onClick
method:您的
onClick
方法有一个小错字:
<img
className="close-more-info-cross"
src="/img/cross.png"
alt="cross"
onCLick={hideMoreDetails}
^~~~~~ 👻
/>
It should be onClick
, not onCLick
.它应该是
onClick
,而不是onCLick
。
If you open the browser's console, you would probably see a red warning such as onCLick method is not a dom property
or such.如果您打开浏览器的控制台,您可能会看到一个红色警告,例如
onCLick method is not a dom property
等。 I recommend keeping the console open when working with React, it will show many useful warnings.我建议在使用 React 时保持控制台打开,它会显示许多有用的警告。
In my case, I had to rename the file name of the component in lowercase.在我的情况下,我不得不将组件的文件名重命名为小写。 After that, all click listeners worked.
之后,所有点击监听器都工作了。 Ex: Footer.js (old file name) -> footer.js
例如:Footer.js(旧文件名)-> footer.js
Before that, I couldn't able to see changes in real-time (not only click listeners, UI changes didn't appear).在此之前,我无法实时看到变化(不仅点击侦听器,UI 变化也没有出现)。 I had to restart the server to see changes.
我不得不重新启动服务器才能看到更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.