RN Lez 06: State, Eventi e TextInput

Docs: State, Handling Text Input

Obiettivi

• Usare useState per gestire dati che cambiano
• Gestire eventi: onPress, onChangeText
• Usare TextInput e Button

---

1. useState — lo stato

useState permette a un componente di ricordare dati che cambiano.

import { useState } from 'react';

const Contatore = () => {
    const [count, setCount] = useState(0);
    //    ↑       ↑               ↑
    //  LEGGO   SCRIVO          INIZIALE

    return (
        <View>
            <Text>Hai cliccato {count} volte</Text>
            <Button title="+1" onPress={() => setCount(count + 1)} />
        </View>
    );
};

Come funziona

1. useState(0) → crea count = 0
2. setCount(count + 1) → aggiorna il valore
3. React ri-renderizza il componente con il nuovo valore

Regole

// ✅ Corretto
const [nome, setNome] = useState('Mario');

// ❌ NON modificare direttamente
nome = 'Luigi';   // la UI NON si aggiorna!

// ✅ USA setNome
setNome('Luigi'); // la UI si aggiorna

---

2. Button e onPress

import { Button } from 'react-native';

<Button
    title="Cliccami"
    onPress={funzione}     // funzione da chiamare
    color="blue"           // colore (Android)
    disabled={false}       // disabilitato?
/>

Tre modi di scrivere handler

// 1. Funzione esterna (leggibile)
const incrementa = () => setCount(count + 1);
<Button title="+1" onPress={incrementa} />

// 2. Arrow inline (semplice)
<Button title="+1" onPress={() => setCount(count + 1)} />

// 3. ❌ ERRORE: chiamata diretta (esegue SUBITO!)
<Button title="+1" onPress={setCount(count + 1)} />

---

3. TextInput — campo di input

import { TextInput } from 'react-native';

const FormNome = () => {
    const [nome, setNome] = useState('');

    return (
        <View>
            <TextInput
                style={styles.input}
                placeholder="Il tuo nome"
                value={nome}
                onChangeText={setNome}   // (text) => setNome(text)
            />
            <Text>Ciao, {nome}!</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 12,
        borderRadius: 8,
        fontSize: 16,
        marginBottom: 10,
    },
});

Proprietà TextInput

Proprietà	Descrizione	Esempio
value	Valore controllato	value={nome}
onChangeText	Chiamata quando cambia	onChangeText={setNome}
placeholder	Testo suggerimento	placeholder="Nome..."
secureTextEntry	Password	secureTextEntry={true}
keyboardType	Tipo tastiera	keyboardType="numeric"
multiline	Multi riga	multiline={true}

---

4. Alert — messaggi e conferme

import { Alert } from 'react-native';

// Semplice
Alert.alert('Messaggio', 'Ciao mondo!');

// Con bottone
Alert.alert('Successo', 'Operazione completata', [
    { text: 'OK' }
]);

// Con scelta
Alert.alert(
    'Elimina',
    'Sei sicuro?',
    [
        { text: 'Annulla', style: 'cancel' },
        { text: 'Elimina', style: 'destructive', onPress: () => elimina() },
    ]
);

---

5. Esempio: Form presentazione

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

export default function App() {
    const [nome, setNome] = useState('');
    const [eta, setEta] = useState('');

    const invia = () => {
        if (!nome || !eta) {
            Alert.alert('Errore', 'Compila tutti i campi!');
            return;
        }
        Alert.alert('✅ Ricevuto', `Ciao ${nome}, ${eta} anni!`);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.titolo}>Chi sei?</Text>
            <TextInput
                style={styles.input}
                placeholder="Nome"
                value={nome}
                onChangeText={setNome}
            />
            <TextInput
                style={styles.input}
                placeholder="Età"
                value={eta}
                onChangeText={setEta}
                keyboardType="numeric"
            />
            <Button title="Invia" onPress={invia} />
        </View>
    );
}

---

6. Tabella riassuntiva

Concetto	Codice
useState	const [x, setX] = useState(0)
Aggiornare	setX(nuovoValore)
Button	<Button title="..." onPress={fn} />
TextInput	<TextInput value={x} onChangeText={setX} />
Alert	Alert.alert('Titolo', 'Msg')

---

7. Esercizio

🎯 “Convertitore € → $”

Crea un’app che:

1. Campo per importo in euro
2. Campo per tasso di cambio (default 1.08)
3. Bottone “Converti”
4. Mostra X.XX € = Y.YY $
5. Se importo vuoto → Alert di errore