IonTabButton 没有捕获 onClick 事件的问题答案

【问题标题】：problem with IonTabButton not capturing onClick eventsIonTabButton 没有捕获 onClick 事件的问题
【发布时间】：2021-05-21 22:09:47
【问题描述】：

我正在使用带有 react 的 ionic 5 css 库。

我喜欢 IonTabButtons 的样式而不是 IonButtons，因为 IonTabButton 允许在 Icon 下方显示文本。在屏幕截图中，我将所有图标显示为选项卡按钮，但 Home 除外，它的样式为 IonButton。

我喜欢 IonTabButton 的外观，但它不运行 onclick 函数（无控制台语句）。

我的问题会更容易/更好/可能 a) 将 onClick 功能添加到 iontab 或 b) 使 IonButton 的显示方式与 IonTabButton 对图标和按钮下方所有文本的显示方式相同。

如果是选项 b) 你知道在哪里可以找到 IonButton 和 IonTabButton 的默认 css 属性以查看它们的不同之处/使两者看起来相似更容易做到。

import React from 'react'
import { useHistory } from 'react-router-dom'
import './Welcome.css'

// ionic lib imports
import {
   IonButton,
   IonCol,
   IonContent,
   IonGrid,
   IonIcon,
   IonLabel,
   IonPage,
   IonRow,
   IonTabButton
} from '@ionic/react'

// ionic icon imports
import {
   cog,
   help,
   home,
   power,
   walk
} from 'ionicons/icons'

const Welcome = (props) => {

   let history = useHistory()

   const handleHomeClick = () => {
      console.log('clicked')
      history.push('./Running')
   }

   return(
      <IonPage>
         <IonContent>
            <IonGrid>
               <IonRow>
                  <IonCol size='6'>
                     <IonButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={home} />
                        Home
                     </IonButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={walk}></IonIcon>
                        <IonLabel> Jog </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={cog}></IonIcon>
                        <IonLabel> Settings </IonLabel>
                     </IonTabButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={help}></IonIcon>
                        <IonLabel> Help </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={power}></IonIcon>
                        <IonLabel> Power </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
            </IonGrid>
         </IonContent>
      </IonPage>
   )
}

export default Welcome



/* CSS Rules For Welcome.js  */

ion-icon {
   font-size: 128px;
   color: white;
}

ion-grid {
   padding-top: 120px;
}

ion-col {
   justify-content: center;
}

ion-row {
   margin: 15px;
}

ion-button {
   height: 128px;
   width: 128px;
   line-height: 10px;
}

ion-label {
   font-size: 24px;
}

【问题讨论】：

标签： css reactjs ionic-framework ionic5 ionic-react

【解决方案1】：

这是我能做的最好的。我将 IonTabButton 切换为 IonButton 并尝试以相同的方式对其进行样式设置。我必须添加以下 CSS：

.transparent{
    background-color: #0000;
}
.big-text{
    font-size: 150%;
}
.fill{
    width: 100%;
    height: 100%;
}

我添加了以下类：

interface ButtonInterface{
    icon: any;
    label: string;
    callback(): any;
}

const Button = ({icon,label,callback}:ButtonInterface)=>{
    return (
    <IonItem lines="none">
        <IonButton
           fill='clear'
           onClick={callback}
           color="dark"
           className="fill"
        >
        <IonList className="transparent">
            <IonIcon
               className="big-text"
               icon={icon}
            />
            <IonLabel>{label}</IonLabel>
        </IonList>
        </IonButton>
    </IonItem>
    );
}

那么这就是你的 html 的样子：

<IonPage>
    <IonContent>
        <IonGrid>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={home} label="Home" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={walk} label="Jog" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={cog} label="Settings" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={help} label="Help" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={power} label="Power" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
        </IonGrid>
    </IonContent>
</IonPage>

【讨论】：