小编Aus*_*nes的帖子

我有一个Ionic 4项目，正在使用侧面菜单。有一个菜单按钮可以打开菜单，并且菜单中有一个菜单选择列表，选中后，菜单选择将关闭侧面菜单。这在浏览器中有效，但在设备上无效。菜单将打开，但不会关闭。

我的侧边菜单在我的app.component.html中

<ion-app>
  <ion-menu side="start" type="push" contentId="content1">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="light-grey">
        <ion-list>
          <ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
          <ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>

这是主页示例

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button autoHide="false" menuToggle></ion-menu-button>
          </ion-buttons>
        <ion-title>
         Opportunity Forms
        </ion-title>
    </ion-toolbar>
  </ion-header>

<ion-content>
  <ion-refresher slot="fixed"  (ionRefresh)="ionRefresh($event)" >
      <ion-refresher-content 
          pulling-icon="arrow-dropdown"
          pulling-text="Pull to refresh"
          refreshing-spinner="circles"
          refreshing-text="Refreshing...">
      </ion-refresher-content>
    </ion-refresher>
  <ion-card> 
      <ion-card-content>


      </ion-card-content>
    </ion-card>
</ion-content>

这是该应用程序的屏幕截图

在Chrome 77.0.3865.90版中可以使用已测试，并且在Android 9上菜单无法关闭

感谢您的帮助，希望我提供了足够的信息。

-编辑（添加app.component.ts）-

import { Component } from '@angular/core';

import { …

我有多个输入，每个输入都有自己的 IonItem。我使用 onIonChange 将输入值设置为用户键入的值。但是，当我单击一个输入时，其他输入会激活，就好像 onIonChange 正在触发它们一样。下面是我的组件的示例：

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

 const [name, setName] = useState<string>();
 const [email, setEmail] = useState<string>();
 const [phone, setPhone] = useState<number>();

return (
  <IonList>
     <IonItemDivider className="backgroundPrimary">Guest</IonItemDivider>
     <IonItem>
        <IonLabel position="stacked">Name</IonLabel>
        <IonInput value={name} onIonChange={e => setName(e.detail.value!)}></IonInput>
     </IonItem>
     <IonItem>
        <IonLabel position="stacked">Email</IonLabel>
        <IonInput value={email} onIonChange={e => setEmail(e.detail.value!)}></IonInput>
     </IonItem>
     <IonItem>
        <IonLabel position="stacked">Phone Number</IonLabel>
        <IonInput type="number" value={phone} onIonChange={e => setPhone(parseInt(e.detail.value!, 10))}></IonInput>
    </IonItem>
 </IonList>
);
};
export default ReservationForm;

这是问题的图像：

正如你所看到的，我在电子邮件中输入了一封信，但电话号码上的浮动标签也被触发了。我是在 useState 上做错了什么还是绑定有问题？任何帮助表示赞赏。

我正在使用 Ionic 5 和 React

我有一个附加到正文的日期输入的模态。然后，根据我对年-月-日的理解，我使用 moment.js 和正确的格式设置输入的值。然而该值是空的。这是因为输入是通过 js 创建的吗？还是我使用的格式有误？提前致谢。

$("body").append("<div class='overlay'></div>");
$("body").append("<div class='modal'></div>");
$(".modal").append("<input id='dateJump' type='date' >");
$("#dateJump").value = moment().format('YYYY-MM-DD');

body {
height: 600px;
}
.modal {
    width:80%;
    height: 40px;
    z-index: 10;
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:white;
}
.overlay {
    width:100%;
    height: 100%;
    z-index: 9;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.5);
}
.modal input {
    -webkit-appearance: none;
    border-radius:none;
    display:block;
    width: 100%;
    height: 40px;
}
input[type="date"],
select:focus {
  font-size: 16px;
  border: none; 
  border-radius: none;
  padding: 1em;
  vertical-align: center;
  text-align: center; …