javascript - 使用地图使用 Swiper 渲染多个 Select 组件不起作用 - Material UI React

Question

我正在尝试渲染多张卡片并将它们存储在slides变量中，以便我可以将这些卡片放入 Swiper 中。但每张卡片的 Select 组件似乎没有响应（无法单击并下拉显示 MenuItem 组件）。这是代码：

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Card, Select, MenuItem } from '@material-ui/core';


export default function DataSwiper() {
    const [value, setValue] = useState('A');
    const handleChange = (value) => {
        console.log(`value: ${value}`);
        setdataShown(value);
      };


    const slides = ['A', 'B', 'C'].map((e) => {
        return (
            <Card>
                {e}
            <Select label="Label" onChange={handleChange}>    
                <MenuItem key={1} value="A">
                    A
                </MenuItem>
                <MenuItem key={2} value="B" disabled>
                    B
                </MenuItem>
            </Select>
        </Card>
    );
})

    return (
        <Swiper
             spaceBetween={50}
             slidesPerView={1}
             loop
        >     
            {slides.map((slide, index) => (
                <SwiperSlide key={index}>{slide}</SwiperSlide>
            ))}
        </Swiper>
    );
}

标签： javascriptreactjsmaterial-uiswiperjs