Как использовать реагирующую форму внутри Ionic Modal?

Я пытаюсь использовать react-hook-form с моим приложением Ionic React. Я использую эту простую форму:

const Form: React.FC<{ color: string }> = ({ color }) => {
  const { handleSubmit, register } = useForm();

  const onSubmit = (data: any) => {
    console.log(`%c${JSON.stringify(data)}`, `color: ${color}`);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={register} name="name" type="text" />
      <input ref={register} name="surname" type="text" />
      <input type="submit" />
    </form>
  );
};

Этот компонент отлично работает, но когда я пытаюсь использовать его внутри компонента IonModal, обработчик onSubmit ничего не показывает.

const App: React.FC = () => {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <IonApp>
      <Form color="green" />
      <IonModal
        isOpen={showModal}
        onDidDismiss={() => setShowModal(false)}
        children={<Form color="red" />}
      />
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
    </IonApp>
  );
};

Если я отправлю первый Form, данные будут правильно напечатаны в консоли, но не если я отправлю второй внутри компонента IonModal. Вот пример, демонстрирующий такое поведение.


reactjs typescript ionic-framework react-hook-form
person Hedi Nasr    schedule 15.03.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

см. рабочий пример здесь...

https://codesandbox.io/s/ionic-modal-form-bug-48weq

Мне удалось заставить его работать с контроллером из react-hook-form

        <IonItem>
          <Controller
            as={<IonInput />}
            name="name"
            control={control}
            rules={{ required: true }}
            onChangeName="onIonChange"
            onChange={([selected]: any) => {
              return selected.detail.value;
            }}
          />
        </IonItem>

полный пост в блоге здесь Использование формы React Hook с Ionic Реагирующие компоненты

person Aaron Saunders    schedule 15.03.2020
comment
Это не будет работать при использовании формы реагирования на ловушку, начиная с версии 6.0+, которая работает с версией 5.7.2 или ниже. - person Rikin; 17.07.2020
comment
см. обновленный пример — dev.to/ ионный/ - person Aaron Saunders; 17.07.2020
comment
Спасибо за быстрый пост. - person Rikin; 17.07.2020

arrow_upward
0
arrow_downward

Я столкнулся с похожей ситуацией здесь, я решил ее, визуализировав IonInput с onIonChange, вызывающим onChange, со значением, которое нам нужно:

<Controller
                    render={({ onChange, value }) => (
                      <IonInput
                        value={value}
                        type="tel"
                        placeholder="AA"
                        onIonChange={(e: CustomEvent<InputChangeEventDetail>) =>
                          onChange(
                            String(e.detail.value!).length < 2
                              ? `0${e.detail.value!}`
                              : e.detail.value!
                          )
                        }
                      />
                    )}
                    rules={{
                      required: true,
                    }}
                    name="expiryMonth"
                    control={control}
                  />

Вместо изменения значения в компоненте Controller мы получаем изменяющееся значение и обрабатываем его внутри функции onIonChange, а полученное значение передается методу изменения компонента Controller.

person SalahAdDin    schedule 16.12.2020