Рубрики
Без рубрики

Как объявить и пропускать параметры на модаль Ionic + React

Как объявлять и пропускать параметры на ионный + реактивный модаль. Помечено программированием, реагировать, JavaScript, учебник.

фото тим на Бессмысленно

Мне весело с Ionic Rect В наши дни и, следовательно, экспериментирующие разные компоненты. Один из них, который я использую почти без исключения в любых приложениях, является модальным. Хотя его посвященный Документация Это довольно аккуратно, я пошел немного дальше, так как мне нравится объявлять их в своих отдельных компонентах. Вот почему я пишу этот новый блог.

Начиная

Чтобы добавить модаль в приложение, мы продолжаем, как показано в документации (сказал вам, хорошо документировано). Мы используем компонент Ionmodal И, чтобы вызвать его открытие и закрытие, мы также используем государство (с помощью AfeState крюк), чтобы изменить свою собственность isopen Отказ

import React, {useState} from 'react';
import {IonModal, IonButton, IonContent} from '@ionic/react';

export const Tab1: React.FC = () => {

  const [showModal, setShowModal] = useState(false);

  return (
    
      
        

This is the modal content.

setShowModal(false)}> Close Modal
setShowModal(true)}> Show Modal
); }; export default Tab1;

Обратите внимание, что я использовал * вкладка Стартовый комплект для разработки этой статьи, поэтому имя выше вышеуказанной страницы Tab1 Отказ *

Создать компонент

Модали могут быстро стать сложными как страницы, поэтому я привык объявить их в своих собственных компонентах. Давайте постараемся создать новый в отдельном новом файле, называемый например MyModal.tsx Отказ

import React from 'react';
import {IonHeader, IonContent, IonToolbar, IonTitle} from '@ionic/react';

class MyModal extends React.Component {

  render() {
    return <>
      
        
          My Modal
        
      
      
        

This is the modal content.

}; } export default MyModal;

Как только мы создали его, мы могли бы использовать его на нашей странице, чтобы заменить предыдущее содержание модала.

import React, { useState } from 'react';
import { IonModal, IonButton, IonContent} from '@ionic/react';

import MyModal from './MyModal';

export const Tab1: React.FC = () => {

  const [showModal, setShowModal] = useState(false);

  return (
    
      
        
         setShowModal(false)}>
            Close Modal
        
      
       setShowModal(true)}>
            Show Modal
      
    
  );

};

export default Tab1;

Закрыть модаль

Супер, мы достигли первого шага, мы теперь имеем модаль, заявленный в отдельном компоненте. Но, в нашем приведенном выше примере, действие, чтобы закрыть модал, соответственно Ионбуттон кнопка, которая устанавливает состояние отображения в ложный , по-прежнему визуализируется вне нашего компонента, который немного несчастным в срок оформления, как, я думаю, довольно часто представляет собой такое действие в заголовке самого модала.

Для того, чтобы переместить эту кнопку в модаль, я на самом деле нашел два возможных решения. Один с использованием Обратный вызов , наверное, самый чистый, и еще один, использующий Ссылки Отказ

Там может быть больше, и я был бы очень рад услышать о них. Поэтому, пожалуйста, пинг меня с вашими комментариями и заранее спасибо за ваши акции 👋

Перезвоните

В этом решении мы хотим пройти обратный вызов к компоненту, чтобы закрыть модаль. Мы улучшаем его с новым свойством, которое мы также используем в нашем заголовке, чтобы добавить связанную кнопку.

import React from 'react';
import {IonHeader, IonContent, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon} from '@ionic/react';

type MyModalProps = {
  closeAction: Function;
}

class MyModal extends React.Component {

  render() {
    return <>
      
        
          My Modal
          
             this.props.closeAction()}>
              
            
          
        
      
      
        

This is the modal content.

}; } export default ({closeAction}: { closeAction: Function }) => ( )

Как только компонент модифицируется, мы могли бы создать новую функцию (на нашей странице), чтобы установить состояние отображения в ложь и пропустите его как обратный вызов нашему компоненту.

import React, {useState} from 'react';
import {IonModal, IonButton, IonContent} from '@ionic/react';

import MyModal from './MyModal';

export const Tab1: React.FC = () => {

  const [showModal, setShowModal] = useState(false);

  async function closeModal() {
    await setShowModal(false);
  }

  return (
    
      
        
      
       setShowModal(true)}>
        Show Modal
      
    
  );

};

export default Tab1;

использованная литература

Другое возможное решение может быть использование отсчета DOM, чтобы увольнять модаль.

import React, {RefObject} from 'react';
import {IonHeader, IonContent, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon} from '@ionic/react';

class MyModal extends React.Component {
  headerRef: RefObject = React.createRef();

  async closeModal() {
    if (!this.headerRef || !this.headerRef.current) {
      return;
    }
    await (this.headerRef.current.closest('ion-modal') as 
                HTMLIonModalElement).dismiss();
  }

  render() {
    return <>
      
        
          My Modal
          
             this.closeModal()}>
              
            
          
        
      
      
        

This is the modal content 3.

}; } export default MyModal;

Вышеуказанный метод имеет эффект, который наш Государство , Используемый на нашей странице для целей дисплея, может в конечном итоге не подвергаться синхронизации с эффективным состоянием модального, поскольку мы закрыли его с помощью DOM. Чтобы преодолеть эту ситуацию, мы могли бы синхронизировать информацию после того, как диалог был уволен.

import React, {useState} from 'react';
import {IonModal, IonButton, IonContent} from '@ionic/react';

import MyModal from './MyModal';

export const Tab1: React.FC = () => {

  const [showModal, setShowModal] = useState(false);

  return (
    
       setShowModal(false)}>
        
      
       setShowModal(true)}>
        Show Modal
      
    
  );

};

export default Tab1;

Но, к сожалению, этот метод имеет недостаток. Поскольку мы изменяем состояние, чтобы синхронизировать его, наш компонент будет «перенаправлен». Поэтому он немного менее исполнен, чем решение с Обратный вызов И именно поэтому я нашел этот первый очиститель решения.

Побочная записка: я провел несколько часов вчера вечером, пытаясь без успеха, чтобы обернуть должен быть необходим соответственно Реагировать. Памятка вокруг модального компонента, чтобы еще раз не представлять страницу, когда состояние модифицировано после того, как модаль уволен. Вероятно, возможно и снова я буду рад услышать какие-либо советы об этом тоже 😉

Обновление публикации после публикации

Лукас К счастью, ответил Этот блог пост с действительным и интересным комментарием: модаль действительно может быть уволен без использования кнопки. Например, ударяя ключ ESC или нажав на фоне.

Поэтому обработчик до ondiddismiss Есть в любом случае, чтобы быть определены для синхронизации открытого состояния (поскольку мы сделали в предыдущей главе) после того, как диалог был бы закрыт.

Суммирован

Закрытие модала с помощью кнопки через Обратный вызов или Ссылка Оба возможно.

С другой стороны, слушая ondiddismiss Для того, чтобы установить состояние в ложь Даже если это запускает бесполезность, является своего рода обязательным.

Пройти параметры

В предыдущих примерах мы уже использовали свойство, чтобы пройти обратный вызов, чтобы закрыть модаль. Аналогичным образом, мы могли бы использовать тот же подход для определения любых других свойств.

import React from 'react';
import {IonHeader, IonContent, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon} from '@ionic/react';

type MyModalProps = {
  closeAction: Function;
  text: string;
}

class MyModal extends React.Component {
  render() {
    return <>
      
        
          My Modal
          
             this.props.closeAction()}>
              
            
          
        
      
      
        

{this.props.text}

}; } export default ({closeAction, text}: { closeAction: Function, text: string }) => ( )

И, следовательно, передайте любые другие параметры со страницы на наш модальный компонент.

import React, {useState} from 'react';
import {IonModal, IonButton, IonContent} from '@ionic/react';

import MyModal from './MyModal';

export const Tab1: React.FC = () => {

  const [showModal, setShowModal] = useState(false);

  async function closeModal() {
    await setShowModal(false);
  }

  return (
    
      
        
        
      
       setShowModal(true)}>
        Show Modal
      
    
  );
};

export default Tab1;

До бесконечности и за пределами 🚀

Дэйвид

Оригинал: “https://dev.to/daviddalbusco/how-to-declare-and-pass-parameters-to-an-ionic-react-modal-39md”