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 上做错了什么还是绑定有问题？任何帮助表示赞赏。

我正在使用 Ionic 5 和 React

Answer 1

onIonChange 事件似乎存在问题，因为在第一次输入时，它会在每个 IonInput 上触发，并为每个不是目标的元素返回一个未定义的值。现在，如果我们将值设置为parseInt(e.detail.value!, 10)in state，则每次输入数字时都会触发 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 上提出有关此问题的问题。

使用上述解决方案进行工作演示