Vous souhaitez enrichir votre application en ajoutant une fonctionnalité pour gérer les tâches.
Sans cette fonctionnalité, l’expérience utilisateur reste limitée, réduisant l’efficacité de l’application.
Explorez comment intégrer une fonctionnalité d’ajout de tâche dans React Native pour améliorer l’interactivité et la gestion des tâches.
Développez votre première application mobile en un rien de temps !
Dans cette section, nous allons créer une fonction pour ajouter une nouvelle tâche à notre liste. Cette fonctionnalité enrichit l’interactivité de l’application et améliore l’expérience utilisateur. Voici un aperçu visuel pour illustrer cette idée.
Pour ce faire, nous allons implémenter une fonction dans le fichier index.js et l’intégrer à l’interface utilisateur.
Dans le fichier index.js , ajoutons d’abord la fonction suivante :
const handleAddTodo = () => {
setTodos((prevTodos) => [
...prevTodos,
{ text: newToDoText, key: String(nextKey) }
]);
setNewToDoText("");
setNextKey(nextKey + 1);
};
Cette fonction :
- Ajoute une nouvelle tâche à la liste existante (todos), en conservant les anciennes tâches.
- Attribue une clé unique à chaque tâche.
- Réinitialise le champ de texte pour une nouvelle saisie.
Ensuite nous allons utiliser un champ de saisie (TextInput) et un bouton (Button) pour permettre à l’utilisateur de créer une tâche, voici l’extrait de code qui implémente cette idée.
<View>
<TextInput
style={styles.inputMargin}
value={newToDoText}
onChangeText={setNewToDoText}
placeholder="Entrer une nouvelle tâche"
/>
<Button title="Ajouter" onPress={handleAddTodo} />
</View>
Donc voici au final le contenu du fichier index.js :
import React, { useState } from "react";
import { Text, View, StyleSheet,TextInput,Button } from "react-native";
import ToDoList from "@/components/toDoList";
export default function Index() {
// State for todos
const [todos, setTodos] = useState([
{ text: "Apprendre le React Native", key: '1' },
{ text: "Construire ma première application ToDoList", key: '2' }
]);
const [newToDoText,setNewToDoText] = useState('');
const [nextkey,setNextkey] = useState(3);
// Function to modify a specific todo by key
const modifierToDos = (key) => {
setTodos((prevTodos) => {
const todosUpdated = prevTodos.map((todo) =>{
if(todo.key === key){
return {...todo, text:"Texte modifié"};
}
return todo;
})
return todosUpdated;
});
};
const handleAddTodo = ()=>{
setTodos((prevTodos)=>[ ...todos, {text: newToDoText,key:String(nextkey)}],)
setNewToDoText('');
setNextkey(nextkey+1)
}
// Display
return (
<View style={styles.main}>
<Text>Edit app/index.tsx to edit this screen .</Text>
<ToDoList todos={todos} modifierToDos={modifierToDos} />
<View>
<TextInput value={newToDoText} onChangeText={setNewToDoText} placeholder=" Entrer une nouvelle tache"></TextInput>
<Button title="Ajouter"onPress={handleAddTodo}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
En lancant l’application avec la commande habituelle : npm run android , nous devrons avoir un resultat comme ceci :
Donc, nous allons ajouter une nouvelle tache nommé : « Nouvelle tache » et cliquer sur le boutton « Ajouter » pour voir le resultat .
Parfait, la nouvelle tâche s’affiche correctement et tout fonctionne comme prévu. Cette section est désormais terminée.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment ajouter une nouvelle tâche dans React Native?
Pourquoi utiliser une clé unique pour chaque tâche?
Quel est le rôle de TextInput dans l'application?
Comment s'assurer que la nouvelle tâche est ajoutée correctement?
Comment tester l'application après l'ajout de la fonctionnalité?
Conclusion
La fonctionnalité d’ajout de tâche dans React Native enrichit l’interactivité de votre application. Quel autre aspect de votre application pourriez-vous améliorer pour offrir une meilleure expérience utilisateur?
