如何将Ionic Segment和Slide结合起来，使用Ionic React制作可滑动的选项卡

Question

我是Ionic的新手，在我的Ionic React应用程序中组合IonSegment和IonSlides有问题。互联网上没有太多的资源，尤其是使用Ionic和React。我如何获得幻灯片内容的索引(在这种情况下是卡片组件(，它也会将内容更改为下一个片段(从市场到我的包，反之亦然(。或者有更好的方法来实现这一点吗？这是下面的代码。

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;