El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com gestionar formularis i components controlats a React Native. Els formularis són una part essencial de moltes aplicacions, ja que permeten als usuaris introduir i enviar dades. Els components controlats ens permeten gestionar l'estat dels formularis de manera eficient.

Continguts

Què són els components controlats?
Creació d'un formulari bàsic
Gestió de l'estat del formulari
Validació del formulari
Exercicis pràctics

Què són els components controlats?

Els components controlats són aquells components de formulari que tenen el seu valor gestionat pel component React. Això significa que l'estat del component es troba en el component React i no en el DOM.

Exemple de component controlat

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

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

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Escriu alguna cosa"
      />
      <Text>Has escrit: {text}</Text>
    </View>
  );
};

export default ControlledComponent;

Explicació

useState: Utilitzem el hook useState per crear una variable d'estat text i una funció setText per actualitzar-la.
TextInput: El component TextInput té el seu valor controlat per l'estat text. Cada vegada que l'usuari escriu alguna cosa, la funció setText actualitza l'estat.

Creació d'un formulari bàsic

Ara crearem un formulari bàsic amb diversos camps d'entrada.

Exemple de formulari bàsic

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

const BasicForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    console.log(`Nom: ${name}, Email: ${email}`);
  };

  return (
    <View>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Nom"
      />
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
      />
      <Button title="Enviar" onPress={handleSubmit} />
    </View>
  );
};

export default BasicForm;

Explicació

TextInput: Hem creat dos camps d'entrada, un per al nom i un altre per al correu electrònic.
Button: El botó "Enviar" crida la funció handleSubmit quan es prem.

Gestió de l'estat del formulari

La gestió de l'estat del formulari és crucial per assegurar-nos que les dades introduïdes pels usuaris es gestionen correctament.

Exemple de gestió de l'estat

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

const FormWithState = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (name, value) => {
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = () => {
    console.log(`Nom: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <View>
      <TextInput
        value={formData.name}
        onChangeText={(value) => handleChange('name', value)}
        placeholder="Nom"
      />
      <TextInput
        value={formData.email}
        onChangeText={(value) => handleChange('email', value)}
        placeholder="Email"
        keyboardType="email-address"
      />
      <Button title="Enviar" onPress={handleSubmit} />
    </View>
  );
};

export default FormWithState;

Explicació

formData: Utilitzem un objecte per gestionar l'estat de diversos camps del formulari.
handleChange: Aquesta funció actualitza l'estat del formulari de manera dinàmica.

Validació del formulari

La validació del formulari és important per assegurar-nos que les dades introduïdes són correctes abans d'enviar-les.

Exemple de validació del formulari

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

const FormWithValidation = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (name, value) => {
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = () => {
    if (!formData.name || !formData.email) {
      Alert.alert('Error', 'Tots els camps són obligatoris');
      return;
    }
    console.log(`Nom: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <View>
      <TextInput
        value={formData.name}
        onChangeText={(value) => handleChange('name', value)}
        placeholder="Nom"
      />
      <TextInput
        value={formData.email}
        onChangeText={(value) => handleChange('email', value)}
        placeholder="Email"
        keyboardType="email-address"
      />
      <Button title="Enviar" onPress={handleSubmit} />
    </View>
  );
};

export default FormWithValidation;

Explicació

Alert: Utilitzem Alert per mostrar un missatge d'error si algun camp està buit.
Validació: La funció handleSubmit comprova si tots els camps estan plens abans d'enviar les dades.

Exercicis pràctics

Exercici 1: Formulari de registre

Crea un formulari de registre amb els següents camps:

Nom d'usuari
Correu electrònic
Contrasenya
Confirmació de contrasenya

Assegura't de validar que:

Tots els camps estan plens.
La contrasenya i la confirmació de contrasenya coincideixen.

Solució

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

const RegistrationForm = () => {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  });

  const handleChange = (name, value) => {
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = () => {
    if (!formData.username || !formData.email || !formData.password || !formData.confirmPassword) {
      Alert.alert('Error', 'Tots els camps són obligatoris');
      return;
    }
    if (formData.password !== formData.confirmPassword) {
      Alert.alert('Error', 'Les contrasenyes no coincideixen');
      return;
    }
    console.log(`Usuari: ${formData.username}, Email: ${formData.email}`);
  };

  return (
    <View>
      <TextInput
        value={formData.username}
        onChangeText={(value) => handleChange('username', value)}
        placeholder="Nom d'usuari"
      />
      <TextInput
        value={formData.email}
        onChangeText={(value) => handleChange('email', value)}
        placeholder="Email"
        keyboardType="email-address"
      />
      <TextInput
        value={formData.password}
        onChangeText={(value) => handleChange('password', value)}
        placeholder="Contrasenya"
        secureTextEntry
      />
      <TextInput
        value={formData.confirmPassword}
        onChangeText={(value) => handleChange('confirmPassword', value)}
        placeholder="Confirmació de contrasenya"
        secureTextEntry
      />
      <Button title="Registrar-se" onPress={handleSubmit} />
    </View>
  );
};

export default RegistrationForm;

Explicació

secureTextEntry: Utilitzem secureTextEntry per ocultar el text de les contrasenyes.
Validació de contrasenya: Comprovem que la contrasenya i la confirmació de contrasenya coincideixen abans d'enviar les dades.

Conclusió

En aquesta secció, hem après com crear formularis i gestionar components controlats a React Native. Hem vist com gestionar l'estat del formulari, validar les dades i crear un formulari de registre complet. Aquests conceptes són fonamentals per desenvolupar aplicacions mòbils interactives i eficients. En el proper mòdul, explorarem la navegació a React Native.

Formularis i components controlats

Continguts

Què són els components controlats?

Exemple de component controlat

Explicació

Creació d'un formulari bàsic

Exemple de formulari bàsic

Explicació

Gestió de l'estat del formulari

Exemple de gestió de l'estat

Explicació

Validació del formulari

Exemple de validació del formulari

Explicació

Exercicis pràctics

Exercici 1: Formulari de registre

Solució

Explicació

Conclusió

Curs de React Native

Mòdul 1: Introducció a React Native

Mòdul 2: Components bàsics i estilització

Mòdul 3: Estat i cicle de vida

Mòdul 4: Navegació

Mòdul 5: Xarxes i dades

Mòdul 6: Conceptes avançats

Mòdul 7: Desplegament i publicació

Mòdul 8: Projectes del món real