Ahora diré que analizaremos en profundidad cómo trabajar con la entrada del usuario y así sucesivamente en
un módulo separado en el próximo módulo del curso, por lo tanto, no profundizaré en ello en este momento.
Lo único que quiero hacer ahora es agregar una entrada de texto aquí a la pantalla de edición del
producto y luego generar un par de entradas de texto aquí que nos permiten obtener la entrada del usuario y, al
final, nos permiten agregar o editar productos sin ningún tipo de validación o algo especial allí.
Por lo tanto, también importaré una vista de desplazamiento porque comenzaré envolviendo todo con una vista de
desplazamiento porque ciertamente podría estar viendo esto en un dispositivo pequeño o
en modo horizontal donde no todo cabe en una pantalla. Ahora allí, tendremos un par de vistas con las diferentes entradas de texto, así
que aquí siempre tendremos un texto con una etiqueta, como el título del producto que debe ingresar y debajo,
una entrada de texto que permita ingrese este título y al final, lo repetiré para todas las cosas diferentes que
desea agregar.
Ahora se requerirá
un poco de estilo, así que aquí para la entrada de texto, agregaré un estilo
de entrada y en el texto anterior, agregaré una etiqueta de
estilo de estilos, también puede darle a esta vista un estilo general de formulario controle, por
ejemplo, lo que quiera nombrar y ahora podemos repetir eso para el título, para la imagenUrl aquí, para el precio y, por
último, pero no menos importante, para la descripción. También envolveré estas cosas en general en otra vista,
por lo que todos estos controles de formulario al final le daré un estilo de formulario de estilos.
Ahora es el momento de trabajar en estos estilos
aquí, así que allá abajo en la hoja de estilos, para el formulario estableceré un margen de 20 en todas las direcciones, por lo
que hay un poco de espacio alrededor de estas entradas. Para mis entradas aquí, para la etiqueta de control de
formulario y la entrada, también quiero agregar algunos estilos, así que aquí tendré el control de formulario, mi etiqueta y luego también la entrada en sí, así que la entrada
de texto en sí y para el control de formulario , Quiero establecer un ancho de 100 para asegurarme de que
sea lo más ancho posible. Para la etiqueta, configuraré la
familia de fuentes para que se abra sin negrita para tener un texto en negrita aquí y luego
un margen vertical de 8 para tener algo de espacio en la parte superior e inferior y
para la entrada en sí, que
es este elemento de entrada de texto, quiero tener un relleno horizontal de dos, por lo que un
relleno muy pequeño para que cuando ingresemos texto, no estemos directamente en el borde de la entrada y un relleno vertical de
5, por lo que un pequeño relleno en la parte superior e inferior y un borde inferior color de este ligero aspecto grisáceo con este código hexadecimal de ccc y luego un ancho de borde inferior
de uno y ese es el estilo con el que seguiré por ahora. Ahora, si echamos un vistazo a eso yendo al administrador y luego, por ejemplo, agregando
uno nuevo, así es como se ve, no se ve tan mal,
ciertamente no está configurado de ninguna manera, pero algunos para comenzar y, por
supuesto, ahora quiero poder enviar esto y guardar esto también.
Para eso en la
pantalla de edición del producto, quiero tener un botón de acción, por lo tanto, un botón en el encabezado, por lo tanto, aquí antes de los estilos tal vez, el
orden no importa, pero me gusta tenerlo justo al lado del componente, voy a agregue las opciones de navegación donde necesito
esa sintaxis dinámica porque tendremos que hacer algo dinámico desde dentro del encabezado y luego aquí, devolvemos ese objeto de
configuración donde, para uno, puede establecer el título del encabezado y eso también debería ser dinámico porque allí ,
Quiero mostrar si estamos editando o agregando, eso dependerá del hecho de si tenemos un parámetro de ID de producto o
no, por lo que ya podemos acceder a navData. navegación. getParam.
Ahora, si echa un vistazo a la pantalla del producto del usuario, notará que cuando
hacemos clic en el botón Editar, pasamos el parámetro de ID del producto aquí para editar la navegación del producto, cuando hacemos clic en el icono Agregar en
el
encabezado. , no pasamos eso.
Entonces, el parámetro de ID del producto, si está disponible, sabemos que estamos en modo de edición.
Entonces, aquí puedo verificar si podemos obtener un valor para eso y si eso es verdadero,
entonces muestro editar producto como título,
de lo contrario, mostraré agregar producto porque es un claro indicador para mí si estamos editando o sumando.
Sin embargo, el título del encabezado no es todo lo que
debería ser parte de la
configuración, también quiero tener esa parte correcta del encabezado para tener un botón que me permita guardar
mis datos y para eso, iré a la pantalla de productos del usuario y
copiaré esta configuración que tengo allí con los botones de encabezado, copie eso en la pantalla de edición del producto y, por
supuesto, también copie las importaciones del botón de encabezado y los botones de encabezado y el elemento para editar la pantalla del producto y agregue esto aquí y ahora, por
supuesto, necesito ajustar esto un poco porque ciertamente un botón de agregar no tiene sentido aquí,
guardar parece ser una etiqueta más apropiada y el ícono que quiero usar, por lo tanto, es md checkmark y iOS checkmark,
que representa un buen ícono de marca de verificación. Por supuesto, aquí tampoco quiero navegar para editar el
producto, sino que quiero enviar mi formulario y eso es algo en lo que trabajaremos en un segundo.
Primero, debemos asegurarnos de que podemos guardar todas las entradas del usuario y de que
también rellenamos previamente este formulario en caso de que lo estemos editando. Entonces, para guardar la entrada del usuario, podemos usar el enlace de estado de
uso de React y simplemente administrar el estado de
cada una de estas entradas de texto, por lo que tendremos cuatro
estados aquí al final con el estado de uso, cada uno inicializado inicialmente en una cadena vacía y luego tenemos
el título y el título establecido y lo repetimos básicamente para tener también como imageUrl y establecer imageUrl y luego aquí, tener el precio y
establecer el precio
y luego aquí también tener la descripción y establecer la descripción y nuevamente, refinaremos esto en el siguiente módulo, donde profundizamos en
el manejo de la entrada del usuario.
Por ahora, solo vincularé esto a mi entrada de texto, el valor aquí está vinculado al título de esta primera, que
es mi entrada de título y al cambiar el texto aquí, obtengo mi texto aquí que cambió y lo guardaré nuevamente en establezca el título en este caso aquí, para que
actualice mi estado del título con el texto del título recién ingresado. Y ahora es este patrón el que agregamos a
todas estas entradas de texto aquí, aquí, por
supuesto, para el segundo estamos hablando de imageUrl y establecemos imageUrl, pero aparte de eso,
es lo mismo. Por el precio, como
era de esperar, pasamos el precio y lo llamamos precio fijo, pero aparte de eso, es lo mismo.
Tenga en cuenta que, por lo tanto, el precio también se administra como
una cadena aquí porque lo que ingrese el usuario siempre es texto y aquí para la entrada de texto, pasaré mi descripción y estableceré mi descripción
aquí.
Con eso, los datos se administran, ahora para prepoblar que cuando tenemos una receta, cuando estamos cargando un producto y estamos
en modo de edición, solo necesitamos obtener nuestra identificación del producto con la ayuda de la navegación de accesorios. , la ID del
producto es un parámetro que podemos arreglar recuperar y si se establece la ID del producto, entonces sé que estamos en
modo de edición y, por supuesto, quiero rellenar previamente mis campos con los valores.
Ahora, en realidad, eso significa que quiero cargar mi producto basado en el ID de producto de mi estado Redux.
Entonces importamos el selector de uso de React Redux aquí y ahora aquí, podemos obtener nuestro producto editado contactando con el selector de uso a nuestro estado Redux y ahora aquí, por supuesto, tenemos que sumergirnos en nuestro segmento de productos y siempre puede
revisar su reductor si no está seguro de cómo fue estructurado
de nuevo y allí, vemos en la parte de productos de nuestro reductor, de nuestra tienda
Redux, debería decir, tenemos esa gama de productos de usuario al final, así que eso
es lo que me interesa Aquí, me comunico con los productos del usuario
y ahora quiero
encontrar el producto con esa identificación de producto. Así que aquí, echaré un vistazo a cada
producto, la función de búsqueda hace esto por mí y quiero devolver verdadero si la ID
del producto que estoy viendo es igual a la ID de producto que obtuve de mis parámetros.
Ahora, por supuesto, a veces esto no producirá nada si no se establece el ID de
producto porque este parámetro no está configurado, lo cual es siempre el caso cuando hacemos clic en este botón de agregar, entonces
este parámetro nunca se establecerá, pero está bien. Entonces, el producto editado simplemente no estará definido, lo cual está totalmente bien. De lo contrario, si el producto
editado no está indefinido, si está configurado, sabemos que estamos en modo de edición
y, por lo tanto, podemos rellenar previamente nuestros valores. Por lo tanto, en realidad lo haré primero antes de inicializar mi
estado porque eso es algo que quiero inicializar dependiendo de si cargamos un producto o no.
Entonces, el título aquí, en realidad allí, comprobaré si el producto editado, si está configurado, si
está configurado, inicializaré el título para editarlo Producto. título, de lo contrario será
una cadena vacía y tendré la misma lógica para el imageUrl aquí.
Así que aquí lo hago para imageUrl, no por el precio porque el precio no debería ser modificable, pero
lo haré por la descripción.
Entonces, el valor predeterminado de título, imagenUrl y descripción depende
de si tenemos un producto editado o no. Y ahora con eso, dado que configuramos esto en el estado,
esto se alimentará automáticamente a nuestras entradas de texto y lo único es que necesito asegurarme de
eliminar la entrada del precio aquí si estamos en modo de edición. Así que comprobaré si el producto editado está configurado aquí y, si
ese es el caso, devolveré nulo
aquí y solo si
no está configurado, así que si estoy en modo de agregar, no en modo de edición, mostraré que entrada de precio aquí, de modo que
la entrada de precio se elimina si estamos editando porque no puedo editarla de todos modos.
Así que ahora con eso, intentemos esto y volvamos a la pantalla de administración. Si hago clic en agregar, sí, necesito volver a agregar la importación
de la plataforma porque la estoy usando en el botón de encabezado para representar la marca de
verificación, los iconos dependen de la plataforma.
Así que asegurémonos de importar la plataforma en la pantalla de edición del producto, pero ahora si hago clic
en Agregar, vemos las cuatro importaciones, todas vacías al principio. Si hago clic en editar por otro lado, están prepoblados
y no veo la entrada de precios, que es exactamente lo que quiero.
Ahora es el momento de asegurarnos de que cuando enviemos esto, ya sea que actualicemos
nuestro producto si lo estamos editando o si lo estamos agregando, estamos agregando un nuevo producto.
Ahora de nuevo, por ahora no agregaré ninguna validación, lo haremos más tarde.
Así que por ahora también podemos enviar un producto vacío, más tarde después del próximo módulo,
esto ya no será posible.