onIonChange 在 Ionic 5 React 上触发多个输入

Question

我有多个输入，每个输入都有自己的 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 做错了什么，还是绑定有问题？ 任何帮助表示赞赏。

我正在使用带有 React 的 Ionic 5

Answer 1

onIonChange 事件似乎存在问题，因为在第一次输入时，它会在每个 IonInput 上触发，并为每个不是目标的元素返回一个未定义的值。现在如果我们在 state 中将值设置为parseInt(e.detail.value!, 10)，每次在数字输入上触发onIonChange

要修复它，您可以为未定义添加条件检查

<IonItem>
    <IonLabel position="floating">Phone Number</IonLabel>
    <IonInput
      type="number"
      value={phone}
      onIonChange={e => {
        if (e.detail.value === undefined) return;
        setPhone(parseInt(e.detail.value!, 10));
      }}
    />
</IonItem>

上述解决方案暂时适合您，但我建议您在 github 上提出有关此问题的问题。

Working demo with the above solution