根据激活的 Ion Segment 按钮显示卡片部分答案

【问题标题】：Show card section according to active IonSegmentButton根据激活的 Ion Segment 按钮显示卡片部分
【发布时间】：2022-11-20 17:25:28
【问题描述】：

.tsx

import { IonCard, IonCardHeader, IonContent, IonPage, IonSegment, IonSegmentButton } from '@ionic/react';
import './example.css';

const Example: React.FC = () => {

  return (
    <IonPage>
      <IonContent fullscreen class="ion-padding">
        <div>
          <IonSegment value="1" color="primary" mode="md">    
            <IonSegmentButton value="1">
                Segment 1
            </IonSegmentButton>
            <IonSegmentButton value="2">
                Segment 2
            </IonSegmentButton>
            <IonSegmentButton value="3">
                Segment 3
            </IonSegmentButton>
          </IonSegment>

          <div>   
            {/* Segment 1 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  1
              </IonCardHeader>
            </IonCard>

            {/* Segment 2 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  2
              </IonCardHeader>
            </IonCard>

            {/* Segment 3 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  3
              </IonCardHeader>
            </IonCard>
          </div>

        </div>
      </IonContent>
        
    </IonPage>
  );
};

export default Example;

如何根据激活的IonSegmentButton显示卡片部分？在angular中，我们使用*ngSwitchCase="'1'"在React中怎么办？

useState可以用吗？请解决！

参考：https://ionicframework.com/docs/api/segment-button

参考。图像：我只想根据活动的 IonSegmentButton 显示 (1) 卡，现在显示所有 3 段内容。

【问题讨论】：

标签： reactjs typescript ionic-framework

【解决方案1】：

您必须同时使用 onClick 和 useState 来处理它。基本上，您将 onClick 放在每个 IonSegmentButton 上，因为它似乎无法在 IonSegment 组件上运行 onChange 或 onClick（奇怪）。

因此，对于每个IonSegmentButton，您都设置了一个新状态，我们可以将其定义为

const [activeSegment, setActiveSegment] = useState("1") // Defining 1 as the default active segment

有建议的解决方案的工作代码：

import { IonCard, IonCardHeader, IonContent, IonPage, IonSegment, IonSegmentButton } from '@ionic/react';
import { useState } from 'react';
import './ExploreContainer.css';

const ExploreContainer: React.FC = () => {
  const [activeSegment, setActiveSegment] = useState("1") // Defining 1 as the default active segment
  return (
    <IonPage style={{marginTop: '50px'}}>
      <IonContent fullscreen class="ion-padding">
        <div>
          <IonSegment value="1" color="primary" mode="md">    
            <IonSegmentButton value="1" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 1
            </IonSegmentButton>
            <IonSegmentButton value="2" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 2
            </IonSegmentButton>
            <IonSegmentButton value="3" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 3
            </IonSegmentButton>
          </IonSegment>

          <div>   
            {/* Segment 1 Content */}
            {activeSegment === "1" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  1
              </IonCardHeader>
            </IonCard>}

            {/* Segment 2 Content */}
            {activeSegment === "2" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  2
              </IonCardHeader>
            </IonCard>}

            {/* Segment 3 Content */}
            {activeSegment === "3" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  3
              </IonCardHeader>
            </IonCard>}
          </div>

        </div>
      </IonContent>
        
    </IonPage>
  );
};

export default ExploreContainer;

React 不存在 ngSwitchCase 指令。如果您不喜欢我放置条件渲染的方式，您可以将该逻辑移到返回 JSX 的方法中。可以参考official documentation了解更好的条件渲染。

【讨论】：