如何在再次使用之前设置反应状态？

Question

import { useState } from 'react'
import './Events.css'

export default function Events() {
    const [position, setImgPos] = useState('0')
    const [display, setDisplay] = useState('')
    const [left, setLeft] = useState('-100%')

    const stylesImg = {
        left: position
    };
    const stylesTitle = {
        display: display,
    };
    const stylesDesc = {
        left: left
    };
    

    return (
        <div className='events-box'>
            <div className='event'
             onMouseLeave={() => {
                setImgPos('0');
                setTimeout(() => {
                    setDisplay('');
                }, 500)
                setLeft('-100%')
            }} >
                <img style={stylesImg}
                    onMouseEnter={() => {
                        setImgPos('60vw');
                        setDisplay('none');
                        setLeft('0')
                    }}
                    src="https://www.w3schools.com/css/img_forest.jpg"
                />
                <p style={stylesTitle} className='event-title'>RoboWars</p>
                <p style={stylesDesc} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
            </div>

            <div className='event'
             onMouseLeave={() => {
                setImgPos('0');
                setTimeout(() => {
                    setDisplay('');
                }, 500)
                setLeft('-100%')
            }} >
                <img style={stylesImg}
                    onMouseEnter={() => {
                        setImgPos('60vw');
                        setDisplay('none');
                        setLeft('0')
                    }}
                    src="https://www.w3schools.com/css/img_forest.jpg"
                />
                <p style={stylesTitle} className='event-title'>RoboWars</p>
                <p style={stylesDesc} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
            </div>
        </div>
    )
}


.events-box {
    margin-top: 20px;
}

.event {
    background-color: #3B3B3B;
    display: flex;
    align-items: center;
}

img {
    width: 40vw;
    height: 40vh;
    position: relative;
    transition: 1s;
}

.event-title {
    margin: auto;
    color: #fff;
    font-size: 2em;
    position: relative;
}

.event-desc {
    position: fixed;
    font-size: 1em;
    color: white;
    width: 60vw;
    padding: 20px;
    margin: auto;
    transition: 1s;
}

当我们将鼠标移入和移出时，我已将 div 用于滑动图像并显示一些文本。

问题是，当我在一个 div 上滑动时，变化也会发生在另一个 div 上。

在这里，当我将鼠标悬停在第一个 div 上时，第二个 div 也移动了，但我不希望这种情况发生：

Answer 1

您应该做的是为每张幻灯片创建一个具有自己状态的组件。

因此，您封装了应用程序中每个逻辑组件的状态。