如何结合“离子段”和“滑动”以使用“离子反应”制作可滑动的标签？

如何解决如何结合“离子段”和“滑动”以使用“离子反应”制作可滑动的标签？

我是Ionic的新手，在将IonSegment和IonSlides组合到Ionic-React应用程序中时遇到问题。互联网上没有太多资源，尤其是与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;

解决方法

  // 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;