Header Ads Widget

Ticker

6/recent/ticker-posts

Un ejemplo simple de formulario de React.js

 

El tutorial anterior nos introdujo a la creación de componentes en React y al uso de estado y accesorios con esos componentes. Hasta ahora, esos componentes se han basado en funciones. Ahora queremos ver cómo crear componentes en React usando la sintaxis de la clase. En React puedes lograr el mismo tipo de cosas usando funciones con estado o usando componentes de clase. El enfoque que elija depende de usted. Los componentes de función que usan ganchos parecen ser muy populares en la actualidad, pero aún queremos saber de qué se trata la sintaxis de React basada en clases, así que construyamos algunos componentes usando esa sintaxis de clases.


Componentes de React basados ​​en clases

Lo primero que podemos hacer es convertir el componente de función de la aplicación en uno de clase. Define una clase con el mismo nombre y la hace extender una clase especial en React, la React.Componentclase. Al extender el React.Component, hace que la clase de JavaScript de su aplicación sea un componente oficial de React. Al igual que con los componentes de función, los componentes de clase también asignan datos para ver. Sin embargo, por ahora, este simple componente de la aplicación es suficiente. Es simplemente el marcador de posición de nuestra aplicación.


Crear un componente de formulario en React

En esta aplicación, queremos utilizar un formulario para capturar algunos datos de entrada de un usuario. Por ejemplo, queremos que el usuario elija el nombre de una empresa y presione Ir! En ese momento, la aplicación obtendrá los detalles de esa empresa de la API de descanso de Github para que podamos trabajar con los datos en reacción. Entonces, para comenzar, aquí hay un componente Form en React usando la sintaxis de la clase.

Para hacer que ese componente se represente en la página, simplemente podemos agregar una referencia al componente Form dentro de la declaración del componente App.

componente de formulario de sintaxis de clase de reacción

Para facilitar la visualización de cada componente en la página, agregamos un estilo CSS simple que agrega un esquema con algo de texto.


Capturando el estado de la entrada de texto con onChange

Queremos poder utilizar los datos capturados en la entrada de texto en la aplicación React, pero ¿cómo lo hacemos? Bueno, primero, agreguemos un stateobjeto al componente Form. Estableceremos una propiedad de companyNameen 'Microsoft'.

Lo que hace esto es representar el formulario, con la entrada de texto rellenada con un valor. Podemos intentar escribir algo en la entrada de texto, pero no podrá hacerlo. Está codificado en este momento. De hecho, con React Dev Tools instalado, podemos ver un mensaje que dice “Advertencia: Tipo de accesorio fallido: proporcionó un valueaccesorio a un campo de formulario sin un onChangecontrolador. Esto generará un campo de solo lectura. Si el campo debe ser mutable, use defaultValueDe lo contrario, configure onChangereadOnly.
estado de reacción de la entrada de texto del formulario

Entonces podemos ver cómo el valor de state.companyName está llenando el formulario de texto. Sin embargo, queremos esta dinámica. Queremos poder establecer el estado simplemente escribiendo en la entrada de texto. ¿Como hacemos eso? Con el controlador onChangeLa línea resaltada a continuación establecerá state.companyName cada vez que un usuario escriba en el campo de entrada.


Actuar con los datos capturados con onSubmit

El estado se actualiza automáticamente ahora cuando el usuario escribe texto en la entrada de texto. Ahora queremos tomar una acción con esos datos una vez que el usuario haga clic en "¡Ir!". La forma de hacer esto es configurar una función de controlador de eventos y luego hacer referencia a esa función cuando el usuario hace clic en el botón. Así que aquí está el código que usaremos para la función del controlador. Queremos usar el valor de companyName para realizar una solicitud de obtención a la api rest de Github. Usaremos la biblioteca axios para que eso suceda.

En el código anterior, ahora podemos ver que la pestaña del formulario tiene un atributo onSubmit. Ese atributo hace referencia a la función asincrónica handleSubmitNecesitamos incluir event.preventDefault () para evitar que el formulario html intente enviarse. Todo lo que queremos hacer es capturar los datos ingresados ​​y usarlos. Axios se utiliza para realizar esa solicitud a la api de Github. Entonces, si escribimos 'Microsoft', la solicitud va a https://api.github.com/users/Microsoft. Puede ver los datos que esto produce si conecta esa URL en un navegador.
respuesta de la api de descanso de github

¡Esos son los datos con los que queremos trabajar dentro de React! Aquí está la parte un poco confusa. Observe this.props.onSubmit (resp.data); línea de código. Lo que estamos diciendo aquí es que queremos tomar los datos que obtuvimos de la llamada api y pasarlos a la función onSubmit (). Esta función aún no existe. De hecho, si escribimos algo en el campo de texto y hacemos clic en el botón, obtendremos un error como "Error de tipo no detectado (en promesa): _this.props.onSubmit no es una función". ¿Cómo arreglamos esto?


Pasar funciones a través de accesorios

Recuerde que un componente principal puede pasar propiedades a componentes secundarios a través del objeto propsEsas propiedades pueden ser valores primitivos simples o referencias a funciones. Eso significa que nuestro componente App puede pasar una referencia de función al componente Form y el componente Form podrá invocar esa función porque será parte de su objeto props. Para que podamos ver esto en acción, ahora definiremos una función llamada doSomething () en el componente App. Todo lo que queremos que haga es cerrar la sesión de los datos que se le pasan. Así que observe la definición de la función, y también muy importante, la forma en que la estamos pasando como un accesorio usando <Form onSubmit = {this.doSomething} />.

Ahora podemos ver que al hacer clic en el botón del formulario, estamos haciendo una solicitud de API exitosa a Github y cerrando la sesión de los datos en la consola. ¡Muy genial!


Resumen de un ejemplo de formulario de React.js simple

En este tutorial, aprendimos algunas cosas sobre cómo crear un elemento Form en React y cómo podemos tomar medidas sobre los datos que capturamos. Para crear un componente de la clase React, amplíe la clase React.Component. Para vincular el estado de un componente de formulario a una entrada de formulario, podemos usar el controlador onChange . Al pasar una función a través del objeto props, podemos hacer algo con los datos que obtenemos de una solicitud de API. A continuación, veremos cómo tomar los datos de respuesta de la API y mostrarlos en el navegador usando componentes adicionales en React.



Publicar un comentario

0 Comentarios