Utiliser des composants Jutro sur votre page
Dans le cadre de cette mission d’apprentissage, vous allez ajouter un formulaire à la page que vous avez créée.
Activité pratique : ajouter un formulaire dédié aux animaux de compagnie à votre nouvelle page
La section suivante contient un exemple de code pour une partie d’un formulaire demandant des informations sur l’animal de compagnie d’un utilisateur. Remplacez le contenu du fichier NewPage.tsx que vous avez créé dans la mission d’apprentissage Créer une nouvelle page par ce code.
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>
);
Après avoir remplacé le contenu de NewPage.tsx, exécutez npm start et revenez à votre navigateur. Le formulaire suivant s'affiche dans votre onglet New Page :
Activité pratique : ajouter des composants à votre page
Dans ces exercices, vous allez ajouter et modifier les composants dans l'exemple de formulaire dédié aux animaux de compagnie.
1. Modifier en un composant Select
L'exemple de formulaire utilise un élément MultipleSelect pour sélectionner un type d'animal de compagnie, mais ce n'est pas correct, car un animal ne peut avoir qu'un seul type. Vous allez résoudre ce problème en le transformant en composant Select.
Sur la page Sélectionner, vous pouvez voir que Select utilise également des composants SelectOption. Il vous suffit donc de remplacer le composant MultipleSelect par Select.
import {
Card,
Select,
SelectOption,
TextInput,
} from '@jutro/components';
...
<Select
label={"Pet type"}
placeholder={"Select pet type"}
>
<SelectOption
value={{
id: 'cat',
label: 'Cat',
}}
/>
...
</Select>
Exécutez npm start et revenez à votre navigateur. Vous constaterez que la liste déroulante de sélection du type a changé et que l'utilisateur ne peut sélectionner qu'une seule option.
2. Ajouter un bouton Soumettre
Dans cet exercice, vous allez ajouter un bouton Soumettre à la fin du formulaire. À ce stade, le bouton n'aura aucune fonction ; vous l'ajouterez ultérieurement dans la mission d'apprentissage.
import {
Card,
Select,
SelectOption,
TextInput,
Button
} from '@jutro/components';
export const MyNewPage: React.FC = () => (
...
<Button label={ "Submit" }/>
);
Exécutez npm start et revenez à votre navigateur. Vous verrez que le bouton Soumettre est maintenant présent.
3. Examiner
À la fin de cet exercice, votre code NewPage.tsx devrait ressembler à ceci :
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>
);
Activité pratique : ajouter un suivi de l'état et la validation à votre page
Dans ces exercices, vous allez ajouter une logique au bouton Soumettre qui vérifie si le formulaire est complet avant de soumettre ses données.
1. Ajouter le suivi des valeurs des composants
Tout d'abord, ajoutez useState à partir de React à vos importations pour permettre l'utilisation du crochet d'état React. Pour en savoir plus, consultez la documentation React.
import React, { useState } from 'react';
Définissez ensuite une interface pour PetData, ce qui permet à votre IDE de mettre en évidence les incohérences de type potentielles.
import React, { useState } from 'react';
...
interface PetDataType {
petName: string;
petType: {
id: string;
label: string;
};
}
type PetDetailsFormProps = object;
L'étape suivante consiste à convertir la fonction MyNewPage React pour intégrer ce type. Dans cette étape, vous devez également ajouter une fonction saveForm qui, dans un premier temps, se contente d’enregistrer les données du formulaire dans la console.
...
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>
)
}
L'étape suivante consiste à ajouter des propriétés onChange à TextInput et Select qui mettent à jour formData lorsque ces composants sont modifiés.
...
<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>
La dernière étape consiste à définir la propriété onClick de Button sur la fonction saveForm définie précédemment.
...
<Button
label={ "Submit" }
onClick={saveForm}
/>
...
Votre code devrait maintenant ressembler à ceci :
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>
);
};
Exécutez npm start et revenez à votre navigateur. Si vous cliquez sur le bouton Soumettre, des messages de ce type s'affichent dans l'onglet de la console de votre navigateur :
2. Ajouter une validation
Dans cet exercice, vous allez ajouter une validation à votre formulaire. Le formulaire affichera une erreur si le composant de texte « Nom de l'animal » est vide ou une réussite s'il n'y a aucun problème.
La première étape consiste à mettre à jour les instructions d’importation. Ajoutez les crochets useContext et useCallback de React avec ModalNextContext depuis Jutro.
import React, { useState, useContext, useCallback } from 'react';
import {
Card,
Select,
SelectOption,
TextInput,
Button,
ModalNextContext
} from '@jutro/components';
L'étape suivante consiste à ajouter des fonctions supplémentaires pour détecter les erreurs. Le crochet useState sera utilisé pour définir les valeurs d'un enregistrement validationMessages. Sa valeur initiale sera définie pour afficher une erreur, car le formulaire se charge sans contenu saisi.
...
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']});
...
}
L'étape suivante consiste à ajouter du code à modifier validationMessages si nécessaire. Dans cet exemple, la seule erreur de validation concerne le composant TextInput vide. Pour suivre son contenu, vous devez ajouter des propriétés onBlur et onFocus pour exécuter les fonctions appropriées.
onFocus sont des fonctions qui s'exécutent lorsqu'un composant est sélectionné par un utilisateur. Les propriétésonBlur sont des fonctions qui s'exécutent lorsqu'un composant est désélectionné par un utilisateur.Les fonctions effacent les erreurs lorsque le paramètre TextInput est sélectionné, puis vérifient les erreurs lorsqu'il est désélectionné.
...
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 })
}
/>
...
}
Enfin, ajoutez du code pour générer une fenêtre modale lorsque l'utilisateur clique sur le bouton Submit, qui vous avertit également en cas d'erreur sur le contenu. Mettez également à jour la fonction saveForm pour afficher la fenêtre modale au lieu d'effectuer une journalisation dans la console.
...
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");
}
};
...
}
Votre code devrait maintenant ressembler à ceci :
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>
)
};
Exécutez npm start et revenez à votre navigateur. Vous devriez voir l'erreur affichée sous le nom de l'animal TextInput.
Si vous sélectionnez Soumettre sans entrer le nom, le message suivant s’affiche :
Si vous cliquez sur « Soumettre » après avoir entré le nom, le message suivant s'affichera :
Formation complémentaire
Consultez le module « Ajouter des composants Jutro à une application » sur Guidewire Education pour suivre des leçons plus approfondies sur l'utilisation des composants Jutro.