React select 在 Swiper 组件中不起作用？

Question

我在React项目中安装了Swiper.js，我想在swiper组件中使用select，但它不起作用。 请帮助我如何使用这个选择组件？

这是“swiper”代码。

` 从 'swiper/react' 导入 { Swiper, SwiperSlide };

    <Swiper
      slidesPerView={4}               `slide number`
      pagination={{ clickable: true }}
      touchStartPreventDefault = {false}  
      allowTouchMove={true}               
      observer={true}
      observeParents={true}             
      parallax={true}
      watchSlidesProgress={true}
    >
      {cardDatas.map((cardData, index) => {
        return (
          <SwiperSlide
            key={index}
            children={<Card data={cardData} />}
          ></SwiperSlide>
        );
      })}
    </Swiper>

“卡片组件”线太长，无法全部显示，所以我展示了一些代码。

常量选项 = [ { 标签：'名字'， 值：'名称'， }, { 标签：“性别”， 值：'性别'， },

  ]

  export default function Card({ data }: { data: CardData }) {
     return (

      <Select
        width="63px"
        height="23px"
        options={options}
        defaultValue={duration}
        onChange={newValue => {
          console.log(newValue);
        }}
        className="text-center text-[12px] text-white"
      />

   )}

我将

OnChange()

事件添加到选择组件并使用 console.log() 但它不起作用。

Answer 1

您可能想像这样将这些选项/道具添加到您的 Swiper

<Swiper