Jutro-Komponenten auf Ihrer Seite verwenden
In dieser Lernmission fügen Sie Ihrer neu erstellten Seite ein Formular hinzu.
Vorgehensweise: Fügen Sie Ihrer neuen Seite ein Haustierformular hinzu
Im folgenden Abschnitt finden Sie einen Beispielcode für einen Teil eines Formulars, in dem Details für das Haustier eines Benutzers abgefragt werden. Dies werden wir als Grundlage für die restlichen Übungen in den Lernmissionen verwenden. Sie können den Inhalt von NewPage.tsx ersetzen, das Sie in der Lernmission Neue Seite erstellen erstellt haben.
import React from 'react';
import {
Card,
MultipleSelect,
SelectOption,
TextInput,
} from '@jutro/components';
export const MyNewPage: React.FC = () => (
<Card
className={"petDetailsForm"}
title={"Pet details form"}
>
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
/>
<MultipleSelect
label={"Pet type"}
placeholder={"Select pet type"}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
<SelectOption
value={{
id: 'dog',
label: 'Dog',
}}
/>
<SelectOption
value={{
id: 'bird',
label: 'Bird',
}}
/>
<SelectOption
value={{
id: 'fish',
label: 'Fish',
}}
/>
</MultipleSelect>
</Card>
);
Nachdem Sie den Inhalt von NewPage.tsx ersetzt haben, führen Sie npm start aus und kehren Sie zu Ihrem Browser zurück. Sie sehen das folgende Formular in Ihrer Registerkarte New Page.
Vorgehensweise: Fügen Sie Komponenten zu Ihrer Seite hinzu
In diesen Übungen werden Sie die Komponenten im Beispiel-Haustierformular hinzufügen und ändern.
1. Ändern in Auswählen
Das Beispielformular verwendet ein MultipleSelect zur Auswahl eines Haustiertyps, dies ist jedoch falsch, da ein Haustier nur einen Typ haben kann. Sie beheben dies, indem Sie dies in eine Select-Komponente ändern.
Auf der Seite Auswählen können Sie sehen, dass in Select auch SelectOption-Komponenten verwendet werden, daher müssen Sie nur die MultipleSelect-Komponente mit Selectvertauschen.
import {
Card,
Select,
SelectOption,
TextInput,
} from '@jutro/components';
...
<Select
label={"Pet type"}
placeholder={"Select pet type"}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
...
</Select>
Führen Sie npm start aus und kehren Sie zu Ihrem Browser zurück. Sie werden sehen, dass sich das Dropdown-Menü für die Auswahl des Typs geändert hat und ein Benutzer nur noch eine Option auswählen kann.
2. Fügen Sie eine Schaltfläche zum Absenden hinzu
In dieser Übung fügen Sie am Ende des Formulars eine Schaltfläche zum Absenden hinzu. Zu diesem Zeitpunkt hat die Schaltfläche keine Funktion, die Sie später in der Lernmission hinzufügen werden.
import {
Card,
Select,
SelectOption,
TextInput,
Button
} from '@jutro/components';
export const MyNewPage: React.FC = () => (
...
<Button label={ "Submit" }/>
);
Führen Sie npm start aus und kehren Sie zu Ihrem Browser zurück. Sie werden sehen, dass die Schaltfläche zum Absenden jetzt vorhanden ist.
3. Überprüfung
Am Ende dieser Übung sollte Ihr NewPage.tsx-Code folgendermaßen aussehen:
import React from 'react';
import {
Card,
Select,
SelectOption,
TextInput,
Button
} from '@jutro/components';
export const MyNewPage: React.FC = () => (
<Card
className={"petDetailsForm"}
title={"Pet details form"}
>
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
/>
<Select
label={"Pet type"}
placeholder={"Select pet type"}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
<SelectOption
value={{
id: 'dog',
label: 'Dog',
}}
/>
<SelectOption
value={{
id: 'bird',
label: 'Bird',
}}
/>
<SelectOption
value={{
id: 'fish',
label: 'Fish',
}}
/>
</Select>
<Button label={ "Submit" }/>
</Card>
);
Vorgehensweise: Fügen Sie Ihrer Seite Statusverfolgung und -validierung hinzu
In diesen Übungen fügen Sie der Schaltfläche zum Absenden eine Logik hinzu, die vor dem Absenden der Daten prüft, ob das Formular vollständig ist.
1. Hinzufügen der Nachverfolgung von Komponentenwerten
Zuerst fügen Sie useState aus react zu Ihren Importen hinzu, um die Verwendung des React-Status-Hooks zu ermöglichen. Weitere Informationen finden Sie in der React-Dokumentation.
import React, { useState } from 'react';
Anschließend definieren Sie eine Schnittstelle für PetData, mit der Ihre IDE potenzielle Typinkonsistenzen hervorheben kann.
import React, { useState } from 'react';
...
interface PetDataType {
petName: string;
petType: {
id: string;
label: string;
};
}
type PetDetailsFormProps = object;
Der nächste Schritt besteht darin, die react-Funktion MyNewPagezu konvertieren, um diesen Typ zu integrieren. In diesem Schritt fügen Sie auch eine Funktion saveForm hinzu, die vorerst nur die Formulardaten in der Konsole protokolliert.
...
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
const [formData, setFormData] = useState<PetDataType>({} as PetDataType);
const saveForm = () => {
console.log(formData)
};
return (
<Card
className={"petDetailsForm"}
title={"Pet details form"}
>
...
</Card>
)
}
Der nächste Schritt besteht darin, onChange-Eigenschaften zu TextInput und Select hinzuzufügen, die formData aktualisieren, wenn diese Komponenten geändert werden.
...
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
onChange={e =>
setFormData({ ...formData, petName: e.target.value })
}
/>
<Select
label={"Pet type"}
placeholder={"Select pet type"}
value={formData.petType}
onChange={e =>
setFormData({
...formData,
petType: {
id: e.target.value.id,
label: e.target.value.label.toString(),
},
})
}
>
...
</Select>
Im letzten Schritt wird die onClick-Eigenschaft von Button auf die zuvor definierte Funktion saveForm gesetzt.
...
<Button
label={ "Submit" }
onClick={saveForm}
/>
...
Ihr Code sollte nun wie folgt aussehen:
import React, { useState } from 'react';
import {
Card,
Select,
SelectOption,
TextInput,
Button
} from '@jutro/components';
interface PetDataType {
petName: string;
petType: {
id: string;
label: string;
};
}
type PetDetailsFormProps = object;
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
const [formData, setFormData] = useState<PetDataType>({} as PetDataType);
const saveForm = () => {
console.log(formData)
};
return (
<Card
className={"petDetailsForm"}
title={"Pet details form"}
>
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
onChange={e =>
setFormData({ ...formData, petName: e.target.value })
}
/>
<Select
label={"Pet type"}
placeholder={"Select pet type"}
value={formData.petType}
onChange={e =>
setFormData({
...formData,
petType: {
id: e.target.value.id,
label: e.target.value.label.toString(),
},
})
}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
<SelectOption
value={{
id: 'dog',
label: 'Dog',
}}
/>
<SelectOption
value={{
id: 'bird',
label: 'Bird',
}}
/>
<SelectOption
value={{
id: 'fish',
label: 'Fish',
}}
/>
</Select>
<Button
label={ "Submit" }
onClick={saveForm}
/>
</Card>
)
};
Führen Sie npm start aus und kehren Sie zu Ihrem Browser zurück. Wenn Sie auf die Schaltfläche „Senden“ klicken, sollten Meldungen wie diese auf der Registerkarte der Browserkonsole angezeigt werden:
2. Validierung hinzufügen
In dieser Lernübung fügen Sie Ihrem Formular eine Validierung hinzu. Das Formular zeigt einen Fehler an, wenn die Textkomponente „Haustiername“ leer ist, oder Erfolg, wenn keine Probleme vorliegen.
Im ersten Schritt werden die Importanweisungen aktualisiert. Fügen Sie die Hooks useContext und useCallback aus React sowie ModalNextContext aus Jutro hinzu.
import React, { useState, useContext, useCallback } from 'react';
import {
Card,
Select,
SelectOption,
TextInput,
Button,
ModalNextContext
} from '@jutro/components';
Im nächsten Schritt werden zusätzliche Funktionen zum Erkennen von Fehlern hinzugefügt. Der Hook useState wird verwendet, um Werte eines Datensatzes validationMessages festzulegen. Der Anfangswert wird so gesetzt, dass ein Fehler angezeigt wird, da das Formular geladen wird, ohne dass Inhalt eingegeben wurde.
...
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
...
const [formData, setFormData] = useState<PetDataType>({} as PetDataType);
const [validationMessages, setValidationMessages] = useState<
Record<string, string[]>
>({error: ['This field is required']});
...
}
Der nächste Schritt besteht darin, Code hinzuzufügen, um validationMessages bei Bedarf zu ändern. In diesem Beispiel besteht der einzige Validierungsfehler darin, dass die Komponente TextInput leer ist. Um ihren Inhalt nachzuverfolgen, müssen Sie also Eigenschaften onBlur und onFocus hinzufügen, um die entsprechenden Funktionen auszuführen.
onFocus-Eigenschaften sind Funktionen, die ausgeführt werden, wenn eine Komponente von einem Benutzer ausgewählt wird.onBlur-Eigenschaften sind Funktionen, die ausgeführt werden, wenn die Auswahl einer Komponente durch einen Benutzer aufgehoben wird.Die Funktionen löschen Fehler, wenn TextInput ausgewählt ist, und suchen dann nach Fehlern, wenn es deaktiviert wird.
...
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
...
const onBlur = useCallback(e => {
const componentValue = e.target.value;
if (!componentValue) {
setValidationMessages({
error: ['This field is required'],
});
} else {
setValidationMessages({});
}
}, []);
const onFocus = () => setValidationMessages({});
...
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
onBlur={onBlur}
onFocus={onFocus}
stateMessages={validationMessages}
onChange={e =>
setFormData({ ...formData, petName: e.target.value })
}
/>
...
}
Fügen Sie abschließend Code hinzu, um einen modalen Dialog zu generieren, wenn der Benutzer auf die Schaltfläche Submit klickt, der auch eine Warnung ausgibt, wenn der Inhalt einen Fehler aufweist. Aktualisieren Sie die Funktion saveForm auch, um das modale Popover anzuzeigen, anstatt in der Konsole zu protokollieren.
...
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
...
const { showAlert } = useContext(ModalNextContext);
const showSuccess = (msg: string) => {
showAlert({
status: 'success',
title: "Saved Successfully",
message: msg,
});
};
const showError = (msg: string) => {
showAlert({
status: 'error',
title: "Error Detected",
message: msg,
});
};
const saveForm = () => {
if (!validationMessages.error) {
showSuccess("Form saved successfully");
} else {
showError("Please enter a pet name");
}
};
...
}
Ihr Code sollte nun wie folgt aussehen:
import React, { useState, useContext, useCallback } from 'react';
import {
Card,
Select,
SelectOption,
TextInput,
Button,
ModalNextContext
} from '@jutro/components';
interface PetDataType {
petName: string;
petType: {
id: string;
label: string;
};
}
type PetDetailsFormProps = object;
export const MyNewPage: React.FC<PetDetailsFormProps> = () => {
const [formData, setFormData] = useState<PetDataType>({} as PetDataType);
const [validationMessages, setValidationMessages] = useState<
Record<string, string[]>
>({error: ['This field is required']});
const onBlur = useCallback(e => {
const componentValue = e.target.value;
if (!componentValue) {
setValidationMessages({
error: ['This field is required'],
});
} else {
setValidationMessages({});
}
}, []);
const onFocus = () => setValidationMessages({});
const { showAlert } = useContext(ModalNextContext);
const showSuccess = (msg: string) => {
showAlert({
status: 'success',
title: "Saved Successfully",
message: msg,
});
};
const showError = (msg: string) => {
showAlert({
status: 'error',
title: "Error Detected",
message: msg,
});
};
const saveForm = () => {
if (!validationMessages.error) {
showSuccess("Form saved successfully");
} else {
showError("Please enter a pet name");
}
};
return (
<Card
className={"petDetailsForm"}
title={"Pet details form"}
>
<TextInput
label={"Pet name"}
placeholder={"Enter pet name"}
required
onBlur={onBlur}
onFocus={onFocus}
stateMessages={validationMessages}
onChange={e =>
setFormData({ ...formData, petName: e.target.value })
}
/>
<Select
label={"Pet breed"}
placeholder={"Select pet breed"}
value={formData.petType}
onChange={e =>
setFormData({
...formData,
petType: {
id: e.target.value.id,
label: e.target.value.label.toString(),
},
})
}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
<SelectOption
value={{
id: 'dog',
label: 'Dog',
}}
/>
<SelectOption
value={{
id: 'bird',
label: 'Bird',
}}
/>
<SelectOption
value={{
id: 'fish',
label: 'Fish',
}}
/>
</Select>
<Button
label={ "Submit" }
onClick={saveForm}
/>
</Card>
)
};
Führen Sie npm start aus und kehren Sie zu Ihrem Browser zurück. Der Fehler sollte unter dem Haustiernamen TextInput angezeigt werden.
Wenn Sie auf „Senden“ klicken, ohne den Namen einzugeben, wird die folgende Meldung angezeigt:
Wenn Sie auf „Senden“ klicken, nachdem Sie den Namen eingeben, wird die folgende Meldung angezeigt:
Weitere Informationen
Gehen Sie zum Modul „Jutro-Komponenten zu einer App hinzufügen“ unter Guidewire Eduction, um ausführlichere Informationen zur Verwendung von Jutro-Komponenten zu erhalten.