Я создаю приложение и использую модальное окно Ionic, чтобы иметь возможность открыть представление для ввода информации. Я не использую форму реагирования. Я просто использую поля ввода, которые я проверяю и onSubmit. Я извлекаю данные из формы useState и передаю их родительскому элементу, который вызывает модальное окно, которое затем преобразует их в тип данных, который мне нужен для отображения информации. Я хочу иметь возможность использовать представление для редактирования существующей информации. Проводка немного сложна, и я новичок в реагировании и Ionic. Я мало что знаю о закономерностях, но знаю, что существуют стандарты, которым следует следовать при таком типе поведения. Я знаю, что самый простой путь — просто создать новое представление для редактирования, но цель реакции — повторное использование компонентов. ChatGPT полезен, но также сбивает меня с толку и заставляет теряться в деталях и отвлекаться от темы. Сначала Чат предложил разделить openModal на openCreate и OpenEdit, а также передать модальному модальному модулю переменную mode и InitialValue и соответствующим образом настроить поведение. Затем было предложено использовать небольшую оболочку, которая вызывает общий OpenModal с начальными значениями и вводит любые другие необходимые значения. Я чувствую, что оболочка усложняет ситуацию, поэтому я пытаюсь сделать первый. openEdit и createEdit немного сбивают с толку, поскольку логика на странице запутанна. Я просто немного растерялся, если иду в правильном направлении. У кого-нибудь есть какие-нибудь советы?
import {
IonButtons,
IonButton,
IonHeader,
IonContent,
IonToolbar,
IonTitle,
IonPage,
IonItem,
IonInput,
useIonModal,
} from '@ionic/react';
import { OverlayEventDetail } from '@ionic/core/components';
const ModalExample = ({ dismiss }: { dismiss: (data?: string | null | undefined | number, role?: string) => void }) => {
const inputRef = useRef(null);
return (
dismiss(null, 'cancel')}>
Cancel
Welcome
dismiss(inputRef.current?.value, 'confirm')} strong={true}>
Confirm
);
};
function Example() {
const [present, dismiss] = useIonModal(ModalExample, {
dismiss: (data: string, role: string) => dismiss(data, role),
});
const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
function openModal() {
present({
onWillDismiss: (event: CustomEvent) => {
if (event.detail.role === 'confirm') {
setMessage(`Hello, ${event.detail.data}!`);
}
},
});
}
return (
Controller Modal
openModal()}>
Open
{message}
);
}
export default Example;```
This is a snippet of what chat proposed for the first solution
``` const defaultForm: NewProjectForm = { name: "", totalHouses: 1, description: "" };
const [presentCreate, closeCreate] = useIonModal(ProjectFormModal, {
onDismiss: (d?: NewProjectForm | null, r?: string) => closeCreate(d, r),
mode: "create",
initialForm: defaultForm,
});
const currentFormRef = useRef(defaultForm);
const [presentEdit, closeEdit] = useIonModal(ProjectFormModal, {
onDismiss: (d?: NewProjectForm | null, r?: string) => closeEdit(d, r),
mode: "edit",
// pass a ref so each open uses the latest value
initialForm: currentFormRef.current,
baselineForm: currentFormRef.current,
});
function openCreate() {
presentCreate({ onWillDismiss: handleCreateDismiss });
}
function openEdit(project: ProjectCardProps) {
currentFormRef.current = projectToForm(project); // update ref first
presentEdit({ onWillDismiss: (e) => handleEditDismiss(project.id, e) });
}
```
Подробнее здесь: https://stackoverflow.com/questions/797 ... -framework
