Saltar al contenido principal

Cómo utilizar componentes de Jutro en su página

En esta misión de aprendizaje, agregará un formulario a la página que creó.

Actividad: añadir un formulario de mascotas a su nueva página​

La siguiente sección contiene un código de muestra para parte de un formulario que solicita datos sobre la mascota de un usuario. Reemplace el contenido del archivo NewPage.tsx que creó con este código en la misión de aprendizaje Cómo crear una página nueva.

NewPage.tsx
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>
);

Después de reemplazar el contenido de NewPage.tsx, ejecute npm start y regrese al explorador. Verá el siguiente formulario en la pestaña New Page:

Selección múltiple en la página

Actividad: añadir componentes a su página​

En estos ejercicios, agregará y cambiará los componentes en el formulario de mascota de muestra.

1. Cambiar a Selección​

En el formulario de muestra, se utiliza MultipleSelect para seleccionar un tipo de mascota, pero esto es incorrecto, ya que una mascota solo puede tener un tipo. Para solucionarlo, cambie esto a un componente Select.

En la página Selección, puede ver que Select también utiliza componentes SelectOption, por eso, lo único que debe hacer es cambiar el componente MultipleSelect por Select.

NewPage.tsx
import {
    Card,
    Select,
    SelectOption,
    TextInput,
} from '@jutro/components';

...

  <Select
      label={"Pet type"}
      placeholder={"Select pet type"}
  >
      <SelectOption
          value={{
              id: 'cat',
              label: 'Cat',
          }}
      />
      ...
  </Select>

Ejecute npm start y regrese al navegador. Verá que el menú desplegable para seleccionar el tipo ahora ha cambiado y el usuario puede seleccionar solo una opción.

Seleccionar en la página

2. Añadir un botón de envío​

En este ejercicio, agregará el botón Enviar al final del formulario. En este momento el botón no tendrá ninguna función; la agregará más adelante en la misión de aprendizaje.

NewPage.tsx
import {
    Card,
    Select,
    SelectOption,
    TextInput,
    Button
} from '@jutro/components';

export const MyNewPage: React.FC = () => (
  ...
  <Button label={ "Submit" }/>
);

Ejecute npm start y regrese al navegador. Verá que el botón Enviar ahora está presente.

Botón en la página

3. Revisar​

Al final de este ejercicio, el código de NewPage.tsx debería tener el siguiente aspecto:

NewPage.tsx
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>
);

Actividad: agregar seguimiento y validación de estado a su página​

En estos ejercicios, agregará lógica al botón Enviar que comprueba la integridad del formulario antes de enviar sus datos.

1. Añadir seguimiento de los valores de los componentes​

Primero, agregue useState desde React a sus importaciones para permitir el uso del gancho de estado de React. Para obtener más información, consulte la documentación de React.

NewPage.tsx
import React, { useState } from 'react';

A continuación, defina una interfaz para PetData, esto permite que su IDE resalte posibles inconsistencias de tipo.

NewPage.tsx
import React, { useState } from 'react';
...

interface PetDataType {
  petName: string;
  petType: {
      id: string;
      label: string;
  };
}

type PetDetailsFormProps = object;

El siguiente paso es convertir la función de React MyNewPage para incorporar este tipo. En este paso, también debe agregar una función saveForm que inicialmente solo registre los datos del formulario en la consola.

NewPage.tsx
...
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>
  )
}

El siguiente paso es agregar propiedades onChange a TextInput y Select que actualicen formData cuando se cambien esos componentes.

NewPage.tsx
...
<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>

El paso final es establecer la propiedad onClick en el Button a la función saveForm definida anteriormente.

NewPage.tsx
...
<Button
    label={ "Submit" }
    onClick={saveForm}
/>
...

Su código ahora debería verse así:

NewPage.tsx
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>
  );
};

Ejecute npm start y regrese al navegador. Al hacer clic en el botón Enviar, se deberían mostrar mensajes como este en la pestaña de la consola del navegador:

Ejemplo de consola

2. Añadir validación​

En este ejercicio de aprendizaje, agregará la validación a su formulario. El formulario mostrará un error si el componente de texto “Nombre de mascota” está en blanco, o acción correcta si no hay problemas.

El primer paso es actualizar las instrucciones de importación. Agregue los ganchos useContext y useCallback de React junto con ModalNextContext desde Jutro.

NewPage.tsx
import React, { useState, useContext, useCallback } from 'react';
import {
    Card,
    Select,
    SelectOption,
    TextInput,
    Button,
    ModalNextContext
} from '@jutro/components';

El siguiente paso es agregar funciones adicionales para detectar errores. El gancho useState se utilizará para establecer los valores de un registro validationMessages. Su valor inicial se establecerá para mostrar un error, porque el formulario se carga sin ningún contenido ingresado.

NewPage.tsx
...

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']});
    ...
}

El siguiente paso es agregar código para cambiar validationMessages cuando sea necesario. En este ejemplo, el único error de validación es si el componente TextInput está vacío, por eso, para realizar un seguimiento de su contenido debe agregar las propiedades onBlur y onFocus para ejecutar las funciones adecuadas.

Note: Las propiedades onFocus son funciones que se ejecutan cuando un usuario selecciona un componente. Las propiedades
onBlur son funciones que se ejecutan cuando un usuario anula la selección de un componente.

Las funciones borrarán los errores cuando se seleccione TextInput y luego buscarán errores cuando se anule la selección.

NewPage.tsx
...

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 })
          }
        />
    ...
}

Por último, agregue código para generar un modal cuando el usuario haga clic en el botón Submit, que también advertirá si el contenido tiene un error. Actualice también la función saveForm para que muestre el modal, en lugar de iniciar sesión en la consola.

NewPage.tsx
...
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");
    }
};
...
}

Su código ahora debería verse así:

NewPage.tsx

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>
  )
};

Ejecute npm start y regrese al navegador. Debería ver el error que se muestra debajo del TextInput Nombre de la mascota.

Ejemplo que muestra un mensaje de estado de error

Si se selecciona Enviar sin ingresar el nombre, aparece el siguiente mensaje:

Ejemplo que muestra un mensaje emergente de error

Al hacer clic en “Enviar” después de ingresar el nombre, aparecerá el siguiente mensaje:

Ejemplo que muestra un mensaje emergente de acción correcta

Conocimientos más profundos​

Vaya al módulo “Agregar componentes de Jutro a una aplicación” en Guidewire Education para obtener lecciones más detalladas sobre el uso de los componentes de Jutro.