0

我无法在索引图像 onClick 上加载 react-material-ui-carousel。

这是我走了多远：

import ImageList from '@material-ui/core/ImageList';
import ImageListItem from '@material-ui/core/ImageListItem';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Carousel from 'react-material-ui-carousel';

export default function Dashboard() {
const [gallery, setGallery] = React.useState(true);
const [carousel, setCarousel] = React.useState(false);
const [slidePosition, setSlidePosition] = React.useState([]);

const images = [
    { id: 1, src: `${image1}` },
    { id: 2, src: `${image2}` },
    { id: 3, src: `${image3}` },
]

const showCarousel = (e) => {
        setGallery(false);
        setSlidePosition(e.target);
        setCarousel(true);

const showGallery = () => {
        setCarousel(false);
        setGallery(true);
    }

return(
<div>

{gallery && (
<div className="gallery">
<div className={classes.root}>
<ImageList rowHeight={160} className={classes.imageList} cols={3}>
{pics.map((image, index) => (
     <ImageListItem key={index} cols={image.cols || 1} >
         <img key={index} id={image.id} src={image.src} alt="" maxHeight="100px"
          onClick={showCarousel}
         />
     </ImageListItem>
))}
</ImageList>
</div>
</div>
)}

{carousel && (
 <Carousel>
    {images.map((image, index) => (
         <div key={index} cols={image.cols || 1} style={{ display: "flex", 
         justifyContent: "center" }}>
         <img key={index} id={slidePosition.id} src={slidePosition.src} alt="" 
         maxHeight="100px" onClick={showGallery}
         />
</div>
))}
</Carousel>
)
}
)
</div>
}

当前的解决方案将显示 ImageList 中图像的扩展轮播视图，但是，当它转换时，它不会显示其余图像，而是继续重复相同的图像。否则，如果没有 [slidePosition, setSlidePosition] 钩子，轮播将仅从数组的图像 [0] 开始。

4

0 回答 0