Estoy usando Material UI Slide . Aquí está mi código. Lo que quiero hacer es que aparezca una slide individual cuando pase el cursor sobre una determinada tarjeta. pero con este código, ambas slide aparecen al pasar el mouse sobre cualquiera de las tarjetas.
manipulador:
const [checked, setChecked] = useState(false); const handleSlide = () => { setChecked(!checked); };jsx:
<Card onMouseEnter={handleSlide} onMouseLeave={handleSlide} sx={{ maxWidth: 345 }}> <CardContent> <Typography gutterBottom variant="h5" component="div"> Card 1 </Typography> <Typography variant="body2" color="text.secondary"> Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica </Typography> </CardContent> <Slide direction="up" in={checked}> <CardActions> <Button size="small">Button 1</Button> <Button size="small">Button 2</Button> </CardActions> </Slide> </Card> <Card onMouseEnter={handleSlide} onMouseLeave={handleSlide} sx={{ maxWidth: 345 }}> <CardContent> <Typography gutterBottom variant="h5" component="div"> Card 2 </Typography> <Typography variant="body2" color="text.secondary"> Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica </Typography> </CardContent> <Slide direction="up" in={checked}> <CardActions> <Button size="small">Button 1</Button> <Button size="small">Button 2</Button> </CardActions> </Slide> </Card>¿Qué debo hacer para lograr lo que se quiere.
Según tengo entendido, después de leer su pregunta, en su código, ambas card usan el mismo estado, como resultado, cuando pasa el mouse sobre cualquiera de ellas, afecta a ambas. Para que cada tarjeta se comporte de manera única, debe asegurarse de que cada componente use su propio estado, no un estado común. Para esto, mi sugerencia es hacer un nuevo componente Card con los métodos State y Handler . luego renderícelo donde se renderizan las cards en este momento. como abajo.
Nuevo componente de tarjeta:
const CardComponent = (props) => { const [checked, setChecked] = useState(false); const handleSlide = () => { setChecked(!checked); }; return ( <React.Fragment> <Card onMouseEnter={handleSlide} onMouseLeave={handleSlide} sx={{ maxWidth: 345 }}> <CardContent> <Typography gutterBottom variant="h5" component="div"> {props.title} </Typography> <Typography variant="body2" color="text.secondary"> Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica </Typography> </CardContent> <Slide direction="up" in={checked}> <CardActions> <Button size="small">Button 1</Button> <Button size="small">Button 2</Button> </CardActions> </Slide> </Card> </React.Fragment> ); } Luego reemplace su tarjeta con este nuevo componente de tarjeta y pase las propiedades a cada tarjeta como props .
<CardComponent title={'Card 1'} /> <CardComponent title={'Card 2'} />Espero que esto resuelva tu problema.