import { View, TextInput, Text, Switch, Button } from 'react-native';
export default function Form() {
return (
<View style={{ flex: 1, gap: 16, justifyContent: 'center', alignItems: 'center' }}>
<TextInput
placeholder="Name"
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Switch />
<Text>Dark mode?</Text>
</View>
<Button
title="Show!"
/>
</View>
);
}import { View, Text, Button } from 'react-native';
export default function Show() {
return (
<View style={{ flex: 1, gap: 16, justifyContent: 'center', alignItems: 'center' }}>
<Text>Show</Text>
<Button
title="Again?"
/>
</View>
);
}En consultant la documentation des components qu'on utilise(Button, TextInput, Switch, Librairie, etc.) on constate un type de prop commençant par on..., ex: onPress. C'est la nomenclature standard pour identifier les événements.
On peut ensuite s'inscrire pour être informé du déclenchement de l'événement via JSX et exécuter le comportement désiré.
<TextInput
placeholder="Name"
onChangeText={ (text) => console.log(text) }
/>On utilise ici la forme inline de l'inscription à l'événement. () => ... représente la notation raccourcie des fonctions fléchées.
export default function Form() {
function handlePressed() {
console.log('pressed!');
}
return (
{/* ... */}
<Button
title="Show!"
onPress={ handlePressed }
/>
{/* ... */}
);
}On peut également envoyer en référence une fonction traditionnelle.
On ne peut pas exécuter directement notre code, il faut absolument passer par une fonctions, inline ou standard. L'événement appelera cette fonction en fournissant les arguments appropriés.
Le state permets au component de conserver un état au fil temps. Autrement, chaque fois que le component de met à jour, donc render, la fonction est appelée sans traces des variables qu'elle contenait précédemment. React offre un mécanisme pour stocker de l'information qui sera accessible d'un render à l'autre.
C'est cet état qui permets à React de suivre l'évolution du component et de constater les changements qui demandent une mise à jour.
Attention les données d'état sont immutables, on ne doit pas changer directement la valeur d'une variable, mais plutôt assigner une copie contenant la nouvelle valeur. C'est ce changement de référence qui indique à React de re-render.
import { useState } from 'react';
export default function Form() {
const [checked, setChecked] = useState(false);
console.log(checked);
return (
{/* ... */}
<Switch
value={ checked }
onValueChange={ (on) => setChecked(on) }
/>
{/* ... */}
);
}Pour suivre plusieurs valeurs reliées, il est intéressant d'encapsuler l'état dans un objet.
import { View, TextInput, Text, Switch, Button } from 'react-native';
import { useState } from 'react';
export default function Form() {
const [display, setDisplay] = useState({});
// {} VS { name: '', darkMode: false }
console.log(display);
return (
{/* ... */}
<TextInput
placeholder="Name"
value={ display.name }
onChangeText={ (text) => {
setDisplay({...display, name: text}); // Destructuring pour creer la copie
console.log(`onChangeText: ${display.name}`); // ATTENTION
}}
/>
{/* ... */}
<Switch
value={ display.darkMode }
onValueChange={ (on) => setDisplay({...display, darkMode: on}) }
/>
{/* ... */}
);
}Attention La nouvelle valeur assignée n'est pas disponible immédiatement dans le même cycle de rendu.