onIonChange запускает более одного ввода на Ioni c 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 или что-то не так с привязкой? Любая помощь приветствуется.

Я использую Ioni c 5 с React

Answer 1

Кажется, есть проблема с событием onIonChange, из-за которого при первом вводе оно запускается на каждом IonInput и возвращает неопределенное значение для каждого элемента, который не является целью. Теперь, если мы установим значение parseInt(e.detail.value!, 10) в состоянии, каждый раз, когда onIonChange запускается на вводе числа

Чтобы исправить это, вы можете добавить условную проверку на undefined

<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.

Рабочая демонстрация с указанным выше решением