TypeScript / React – forms

Bienvenidos sean a este post, hoy veremos como manejar forms en react.

En el post anterior creamos una aplicacion de react para tener un listado de libros y poder ver sus detalles a traves de la interaccion entre distintos componentes. Hoy tomaremos ese codigo nuevamente y agregaremos el form para poder ordenar libros y comprarlos. Sino poseen el codigo de la aplicacion les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser usado. Nuestro siguiente paso sera ir a VerDetalles.tsx y haremos algunas modificaciones. La primero sera agregar una nueva interfaz despues de la interfaz IDetalleProps:

export interface IEstadoDetalles {
        numLibros: number;
}

Este solo lo usaremos para almacenar la cantidad de libros que podemos ordenar. Nuestra modificacion sera en la clase, lo primero sera buscar la siguiente linea:

export class VerDetalles extends React.Component<IDetallesProps> {

La modificaremos de la siguiente manera:

export class VerDetalles extends
        React.Component<IDetallesProps, IEstadoDetalles> {

En este caso le agregamos la nueva interfaz para que pueda acceder al nuevo tipo podemos manejar el valor comentado anteriormente. Lo siguiente sera modificar el constructor de la siguiente manera:

        constructor(props: IDetallesProps) {
          super(props);
          this.manejarCierre = this.manejarCierre.bind(this);
          this.onChange = this.onChange.bind(this);
          this.onSubmit = this.onSubmit.bind(this);
          this.state = { numLibros: 1 }
        }

En esta modificacion agregamos tres nuevas lineas, dos para unir metodos que usaremos para nuestro form con metodos locales, los cuales estableceremos en un momento, y por ultimo iniciamos el valor de la nueva interfaz. Nuestra siguiente modificacion sera en la serie de Grid que usamos para mostrar los datos, luego de la cual usamos para establecer la tabla que muestra los datos adicionales agregaremos los siguientes Grid:

<Grid item>
       &nbsp;
</Grid>
<Grid item>
       <h3>Ordenar ahora: </h3>
</Grid>
<form noValidate autoComplete="off"
       onSubmit={this.onSubmit}>
  <Grid item>
       <TextField type="number" name="numLibros"
         id="standard-basic" label="Num. de libros"
         onChange={this.onChange}
         value={this.state.numLibros} />
  </Grid>
  <Grid item>
       &nbsp;
  </Grid>
  <Grid item>
       <Button type="submit" variant="contained"
               color="primary">
       Agregar al Carrito
       </Button>
  </Grid>
</form>

Los primeros dos son de tipo estetico, el primero para separar una linea, el siguiente sera para indicar que podemos ordenar al libro. Despues agregamos el elemento form donde pasamos la opcion noValidate para que no sea validado cuando se lo suba o submitee. La siguiente opcion es para que el browser no complete automaticamente los campos. Y asociamos el evento submit al metodo onSubmit local. Agregamos un Grid para contener el TextField que sera el encargado de manejar el valor de numLibros. Por esa razon, asignamos a numLibros como la propiedad name, asociamos el evento Change al metodo local con este nombre, y a la propiedad value le asignamos el valor de la propiedad numLibros. Agregamos otro Grid para separacion y por ultimo, agregamos otro Grid conteniendo un Button para hacer el submit del form. Ya tenemos nuestro formulario creado, les dejo como quedo finalmente nuestro render:

        render() {
          return (
            <div className="full-screen-details-dialogue">
              <Dialog
                fullScreen
                open={this.props.open}
                TransitionComponent={Transicion}>
                <AppBar>
                  <Toolbar>
                    <IconButton
                        edge="start"
                        color="inherit"
                        onClick={this.manejarCierre}
                        aria-label="close">
                        <Close></Close>
                    </IconButton>
                  </Toolbar>
                </AppBar>
                <div className="detalles-libro-top">
                  <Paper className="detalles-libro-body">
                     <Grid container spacing={5}>
                       <Grid item>
                          <img className="imagen-grande"
                                src={this.props.libro?.imagen}
                                alt={this.props.libro?.nombre} />
                       </Grid>
                       <Grid item xs container direction="column"
                                justify="flex-start" align-items="stretch">
                         <Grid item>
                            <h1>{this.props.libro?.nombre}</h1>
                         </Grid>
                         <Grid item>
                            <h1>{this.props.libro?.descripcion}</h1>
                         </Grid>
                         <Grid item>
                            <TableContainer component={Paper}>
                                <Table aria-label="tabla">
                                  <TableHead>
                                     <TableRow>
                                        <TableCell>Datos del libro</TableCell>
                                        <TableCell>&nbsp;</TableCell>
                                     </TableRow>
                                  </TableHead>
                                  <TableBody>
                                     <TableRow>
                                        <TableCell>Autor</TableCell>
                                        <TableCell>
                                        {this.props.libro?.datos?.autor}
                                        </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>Publicado</TableCell>
                                        <TableCell>
                                        {this.props.libro?.datos?.anyo}
                                        </TableCell>
                                     </TableRow>
                                     <TableRow>
                                        <TableCell>Precio</TableCell>
                                        <TableCell>
                                        {this.props.libro?.datos?.precio}
                                        </TableCell>
                                     </TableRow>
                                  </TableBody>
                                </Table>
                             </TableContainer>
                         </Grid>
                         <Grid item>
                                &nbsp;
                         </Grid>
                         <Grid item>
                                <h3>Ordenar ahora: </h3>
                         </Grid>
                         <form noValidate autoComplete="off"
                                onSubmit={this.onSubmit}>
                           <Grid item>
                                <TextField type="number" name="numLibros"
                                  id="standard-basic" label="Num. de libros"
                                  onChange={this.onChange}
                                  value={this.state.numLibros} />
                           </Grid>
                           <Grid item>
                                &nbsp;
                           </Grid>
                           <Grid item>
                                <Button type="submit" variant="contained"
                                        color="primary">
                                Agregar al Carrito
                                </Button>
                           </Grid>

                         </form>
                      </Grid>
                   </Grid>
                 </Paper>
              </div>
           </Dialog>
        </div>
        )
    }

Solo nos resta los dos metodos para controlar los eventos change y submit. Estos dos metodos los agregaremos despues del metodo manejarCierre. Agreguemos el primero:

    onChange(ev: React.ChangeEvent<HTMLInputElement>) {
        this.setState({ numLibros: parseInt(ev.target.value) });
        console.log(`onChange: ${ev.target.name}: ${ev.target.value}`);
    }

En este caso, tiene un argumento donde mediante la funcion ChangeEvent tomaremos el valor de un elemento de ingreso HTML cuando sea modificado o cambie. Dentro de esta usaremos a setState para establecer el valor de numLibros con el valor recibido y finalmente mostraremos en el log de la consola el nombre de la propiedad y el valor de la misma. A continuacion agregaremos el siguiente bloque de codigo:

    onSubmit(ev: React.FormEvent) {
        console.log(`submit: ${this.state.numLibros}`);
        ev.preventDefault();
    }

En este caso recibira los valores del form, y en este caso mostramos en el log de la consola el nombre del evento y el valor que hemos submitido. Y por utimo agregamos la funcion preventDefault para que la pagina no se recargue al momento de submitirlo. Con todo esto ya tenemos nuestro form completamente agregado, vamos a probarlo mediante el siguiente video

En el video podemos ver como nuestro form tiene un valor predeterminado, el establecido en el constructor, luego lo modificamos un par de veces y le dimos el submit con el boton. En todo momento no afecto a nuestra aplicacion y sigue con la misma conducta. Veamos como son los valores tomados por nuestro log en la consola:

Observen como nos registro primero nuestro cambio de valores y luego el valor que submitimos, asi como tambien el cierre de los detalles. Antes de terminar les dejo un link para descargar los archivos del proyecto y modificados en este post:

En resumen, hoy hemos visto a form en react, como se aplican, como podemos manejarlos mediante los estados y las propiedades, y ver como se manipula la informacion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.