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

Posted 2023-02-22

【中文标题】onIonChange 在 Ionic 5 React 上触发多个输入

【英文标题】：onIonChange is triggering more than one input on Ionic 5 React

【发布时间】：2020-09-16 12:37:52

【问题描述】：

我有多个输入，每个输入都有自己的 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

【参考方案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

【讨论】：

谢谢，这比我的工作要干净。这是一个小错误，但在具有 10 个输入的 ui 上，其他输入会做出反应。