reactjs - 如何结合 Ionic Segment 和 Slide 使用 Ionic-React 制作可滑动的标签？

Question

我是 Ionic 新手，在我的 Ionic-React 应用程序中结合 IonSegment 和 IonSlides 时遇到问题。互联网上的资源并不多，尤其是使用 Ionic 和 React。如何获取幻灯片内容的索引（在本例中为 Card 组件），这也会将内容更改为下一个片段（从 Market 到 My Package，反之亦然）。或者有没有更好的方法来实现这一点？这是下面的代码。

import React, { useState } from 'react';
import {IonSegment,IonSegmentButton,IonRow,IonCol,IonGrid,IonContent,IonSlides, IonSlide,IonHeader, IonPage, IonTitle, IonToolbar,IonButtons,IonMenuButton,IonSearchbar} from '@ionic/react';
import Card from '../components/Card';
//import Segment from '../components/Segment';
const Market: React.FC = () => {

  const [searchText, setSearchText] = useState('');

  const slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: false,
    pagination: {
      el: null
    },
  
  };

 
return (
<IonPage>

<IonHeader>
  <IonToolbar>
    <IonButtons slot="start">
      <IonMenuButton />
    </IonButtons>
    <IonTitle>Market</IonTitle>
  </IonToolbar>
</IonHeader>

<IonHeader>
        <IonToolbar>
          <IonTitle>Search Package</IonTitle>
          <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
          {/*-- Segment in a toolbar --*/}
          <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
            <IonSegmentButton value="market">
              <IonTitle>Market</IonTitle>
            </IonSegmentButton>
            <IonSegmentButton value="mypackage">
              <IonTitle>My Package</IonTitle>
            </IonSegmentButton>
          </IonSegment>
        </IonToolbar>
      </IonHeader>
      
      <IonContent>
      {/*-- Market Segment --*/}
      <IonSlides pager={true} options={slideOpts}>
      <IonSlide>
      <IonGrid>
      <IonRow>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
      </IonRow>
      </IonGrid>
      </IonSlide>
      {/*-- Package Segment --*/}
      <IonSlide>
      <IonGrid>
      <IonRow>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
        <IonCol><Card/></IonCol>
      </IonRow>
      </IonGrid>
      </IonSlide>
    </IonSlides>
  </IonContent>
</IonPage>
)
}

export default Market;

Answer 1

  // added useRef 
  import React, { useState, useRef } from 'react';
  import {IonSegment,IonSegmentButton,IonRow,IonCol,IonGrid,IonContent,IonSlides, 
          IonSlide,IonHeader, IonPage, IonTitle, 
          IonToolbar,IonButtons,IonMenuButton,IonSearchbar} from '@ionic/react';
  import Card from '../components/Card';

  //import Segment from '../components/Segment';
  const Market: React.FC = () => {

    const [searchText, setSearchText] = useState('');

    // a ref variable to handle the current slider
    const slider = useRef<HTMLIonSlidesElement>(null);
    // a state value to bind segment value
    const [value, setValue] = useState("0");

    const slideOpts = {
      initialSlide: 0,
      speed: 400,
      loop: false,
      pagination: {
        el: null
      },
    
    };

    // a function to handle the segment changes
    const handleSegmentChange = (e: any) => {
      setValue(e.detail.value);
      slider.current!.slideTo(e.detail.value);
    };

    // a function to handle the slider changes
    const handleSlideChange = async (event: any) => {
      let index: number = 0;
      await event.target.getActiveIndex().then((value: any) => (index=value));
      setValue(''+index)
    }

   
  return (
  <IonPage>

  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonMenuButton />
      </IonButtons>
      <IonTitle>Market</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonHeader>
          <IonToolbar>
            <IonTitle>Search Package</IonTitle>
            <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
            {/*-- Segment in a toolbar --*/}
            {/*-- the value is binded to state value and is updated every time setValue is running --*/}
            {/*-- buttons values are set to 0 and 1, to match slider index, it can be whatever you need but there mas be a table --*/}
            <IonSegment value={value} onIonChange={(e) => handleSegmentChange(e)} >
              <IonSegmentButton value="0">
                <IonTitle>Market</IonTitle>
              </IonSegmentButton>
              <IonSegmentButton value="1">
                <IonTitle>My Package</IonTitle>
              </IonSegmentButton>
            </IonSegment>
          </IonToolbar>
        </IonHeader>
        
        <IonContent>
        {/*-- Market Segment --*/}
      {/*-- the ref method binds this slider to slider variable --*/}
        <IonSlides pager={true} options={slideOpts} onIonSlideDidChange={(e) => handleSlideChange(e)} ref={slider}>>
        <IonSlide>
        <IonGrid>
        <IonRow>
          <IonCol><Card/></IonCol>
          <IonCol><Card/></IonCol>
          <IonCol><Card/></IonCol>
        </IonRow>
        </IonGrid>
        </IonSlide>
        {/*-- Package Segment --*/}
        <IonSlide>
        <IonGrid>
        <IonRow>
          <IonCol><Card/></IonCol>
          <IonCol><Card/></IonCol>
          <IonCol><Card/></IonCol>
          <IonCol><Card/></IonCol>
        </IonRow>
        </IonGrid>
        </IonSlide>
      </IonSlides>
    </IonContent>
  </IonPage>
  )
  }

  export default Market;