El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Formularios y Componentes Controlados

Siguiente ►
►

Introducción

En esta lección, aprenderemos sobre los formularios y los componentes controlados en React Native. Los formularios son una parte esencial de muchas aplicaciones, ya que permiten a los usuarios ingresar y enviar datos. Los componentes controlados son aquellos en los que el estado del formulario es manejado por el estado del componente React.

Conceptos Clave

  1. Componentes Controlados: Un componente controlado es aquel cuyo valor es controlado por el estado de React. Esto significa que el valor del input es determinado por el estado del componente y se actualiza a través de eventos.
  2. Manejo de Eventos: Para actualizar el estado del componente, necesitamos manejar eventos como onChangeText para inputs de texto.
  3. Estado del Componente: El estado del componente se utiliza para almacenar los valores de los inputs del formulario.

Ejemplo Práctico

Vamos a crear un formulario simple con un campo de texto y un botón de envío. El valor del campo de texto será controlado por el estado del componente.

Paso 1: Configuración Inicial

Primero, asegúrate de tener un proyecto de React Native configurado. Si no lo tienes, sigue las instrucciones del Módulo 1 para configurar tu entorno de desarrollo.

Paso 2: Crear el Componente de Formulario

Crea un nuevo archivo llamado ControlledForm.js y añade el siguiente código:

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

const ControlledForm = () => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    alert(`Submitted text: ${text}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Enter some text:</Text>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    marginBottom: 10,
    fontSize: 18,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
});

export default ControlledForm;

Explicación del Código

  1. Importaciones: Importamos los módulos necesarios de React y React Native.
  2. Estado del Componente: Utilizamos el hook useState para crear una variable de estado text y una función setText para actualizarla.
  3. TextInput: El componente TextInput tiene su valor controlado por el estado text. El evento onChangeText se utiliza para actualizar el estado cada vez que el usuario escribe algo.
  4. Button: El botón de envío llama a la función handleSubmit cuando se presiona, mostrando una alerta con el texto ingresado.

Paso 3: Usar el Componente en la Aplicación

Para usar el componente ControlledForm, importa y renderiza el componente en tu archivo principal, por ejemplo, App.js:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import ControlledForm from './ControlledForm';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ControlledForm />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Ejercicio Práctico

Ejercicio 1: Añadir un Campo de Correo Electrónico

Añade un campo de correo electrónico al formulario y asegúrate de que su valor también sea controlado por el estado del componente.

Solución

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

const ControlledForm = () => {
  const [text, setText] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    alert(`Submitted text: ${text}, Email: ${email}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Enter some text:</Text>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
      <Text style={styles.label}>Enter your email:</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    marginBottom: 10,
    fontSize: 18,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
});

export default ControlledForm;

Conclusión

En esta lección, hemos aprendido cómo crear formularios y manejar componentes controlados en React Native. Hemos visto cómo utilizar el estado del componente para controlar los valores de los inputs y cómo manejar eventos para actualizar el estado. Estos conceptos son fundamentales para construir aplicaciones interactivas y dinámicas.

En la próxima lección, exploraremos cómo manejar la navegación en React Native utilizando React Navigation. ¡Sigue practicando y nos vemos en la siguiente lección!

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados