我有一个使用 React 和 CSS 的旋转图片库。它可以工作,只是每次我单击按钮向前或向后旋转时,都需要单击两次才能开始正常工作。例如,第一次单击不执行任何操作,第二次单击继续,或者如果向右滚动然后单击左侧按钮,它会再次向右滚动,然后后续单击开始向左滚动。
我知道这可能是因为状态已更新,但尚未重新渲染,但无论我尝试什么,它都不会改变任何内容。我尝试将集合转换移动到一个单独的函数中。我尝试将其设置为一个变量,然后函数将其设置为等于 currentTransform 的状态。我似乎无法让它停止需要两次点击。任何帮助将不胜感激。
反应代码
const Rotating = () => {
const [currentTransform, setCurrentTransform] = useState(`perspective(1000px) rotateY(0deg)`);
const [imageGroup, setImageGroup] = useState("imageSet1");
const [x, setX] = useState(0);
const numberOfPictures = 8;
const handlePreviousButton = () => {
setX(x + 45);
setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}
const handleNextButton = () => {
setX(x - 45);
setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}
const changeImageSet = (imageSet: string) => {
setImageGroup(imageSet);
}
return (
<div className="rotating-gallery-main-div-style">
<div className="rotating-gallery-btn-container">
<Button onClick={() => changeImageSet("imageSet1")} className="image-group-btn" variant="primary">
Pictures
</Button>
<Button onClick={() => changeImageSet("imageSet2")} className="image-group-btn" variant="primary">
Other Pictures
</Button>
</div>
<div className="rotating-gallery-image-container" style={{transform: currentTransform} as React.CSSProperties}>
{[...Array(numberOfPictures)].map((_, index) =>
<span style={{ "--i": index } as React.CSSProperties} key={index}>
<img
src={`/images/${imageGroup}/${index}.jpg`}
/>
</span>
)}
</div>
<div className="rotating-gallery-btn-container">
<Button onClick={handlePreviousButton} className="rotating-gallery-prev-btn rotating-gallery-btn" variant="primary">Previous</Button>
<Button onClick={handleNextButton} className="rotating-gallery-next-btn rotating-gallery-btn" variant="primary">Next</Button>
</div>
</div>
)
}
CSS
.rotating-gallery-main-div-style {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
background: black;
overflow: hidden;
}
.rotating-gallery-image-container {
position: relative;
width: 250px;
height: 250px;
transform-style: preserve-3d;
transform: perspective(1000px) rotateY(0deg);
transition: transform 0.7s;
}
.rotating-gallery-image-container span {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.rotating-gallery-image-container span img {
position: absolute;
left: 0;
top: -30px;
width: 100%;
max-height: 225px;
}
.rotating-gallery-btn-container {
position: relative;
width: 80%;
}
.rotating-gallery-btn {
position: absolute;
bottom: -80px;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
.image-group-btn {
position: relative;
top: -180px;
margin-left: 10px;
}
.rotating-gallery-prev-btn {
left: 20%;
}
.rotating-gallery-next-btn {
right: 20%;
}
.rotating-gallery-btn:hover {
filter: brightness(1.5);
}
在react中setState是异步的,所以当你调用setX(newVal)时,你的x还没有更新。试试这个
const handlePreviousButton = () => {
const newXValue = x + 45
setX(newXValue);
setCurrentTransform(`perspective(1000px) rotateY(${newXValue}deg)`);
}