Лучший шаблон для создания и редактирования формы в React + Ionic Framework ⇐ Javascript

[Anonymous]

Я создаю приложение и использую модальное окно 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