Ce que je vous apporte cette fois, ce sont les étapes détaillées de la mise en œuvre de TodoList à l'aide de React. Cet article vous donnera une analyse détaillée.
Parlons d'abord des fonctions à implémenter
(1) Des tâches peuvent être ajoutées
(2) Les couleurs des tâches terminées et des tâches inachevées sont distinguées
( 3 ) Lors de l'ajout de tâches, de la modification de l'état des tâches et de la suppression de tâches, le nombre suivant de tâches terminées et le nombre total de tâches changeront
Ce qui précède sont les fonctions à implémenter ;
2. Comment concevoir ensuite ?
(1) Structure des données du stockage des tâches :
list: [{ id: 0, name: '吃饭', status: 0 }, { id: 1, name: '睡觉', status: 0 }, { id: 2, name: '打豆豆', status : 0 }]
Chaque tâche a son propre identifiant, son nom de tâche, son statut et son identifiant de tâche. identifiant la tâche, elle peut également être utilisée comme valeur clé de l'élément de liste. Nous savons tous que lors de l'utilisation de listes dans React, chaque élément de la liste doit avoir une valeur clé. Cela permettra de localiser rapidement chaque élément de la liste et de réduire les requêtes inutiles lors de l'exécution de l'algorithme Diff, contribuant ainsi à améliorer les performances.
(2) Division des composants
TodoList dans son ensemble en tant que grand composant
Chaque élément de la liste (ListItem) en tant que composant
< ; 🎜 >Ajoutez la boîte de tâches (Dialogue) en tant que composant. 3. Implémentation spécifique Prenons l'implémentation de ListItem comme exemple : Il est nécessaire de diviser l'élément de liste en un composant séparément, de sorte que chaque élément distinct Ils sont tous indépendants, ce qui simplifie la logique du code, améliore la réutilisabilité du code et facilite la maintenance. de traitement d'événement dans le composant enfant, puis exécutez la fonction passée par le composant parent si certaines conditions sont remplies.
import React, { Component } from 'react'; import ListItem from './listItem'; import Dialog from './dialog'; import './main.css'; class TodoList extends Component { constructor (props) { super(props); //初始任务列表 this.state = { list: [{ id: 0, name: '吃饭', status: 0 }, { id: 1, name: '睡觉', status: 0 }, { id: 2, name: '打豆豆', status : 0 }], finished: 0 }; } //添加新任务,在组件中以props的形式传递给子组件 addTask (newitem) { var allTask = this.state.list; allTask.push(newitem); this.setState({ list: allTask }); } //更新完成的任务,在组件中以props的形式传递给子组件 updateFinished (todoItem) { var sum = 0; this.state.list.forEach( (item) => { if (item.id === todoItem.id) { item.status = todoItem.status; } if (item.status === 1) { sum++; } }); this.setState({ finished: sum }); } //更新任务总数,在组件中以props的形式传递给子组件 updateTotal (todoItem) { var obj = [], sum = 0; this.state.list.forEach((item) => { if (item.id !== todoItem.id) { obj.push(item); if (item.status === 1 ) { sum++; } } }); this.setState({ list: obj, finished: sum }); } render () { return ( <div className="container"> <h1>TodoList</h1> <ul> { this.state.list.map ((item, index) => <ListItem item={item} finishedChange={this.updateFinished.bind(this)} totalChange={this.updateTotal.bind(this)} key={index} /> )} <li>{this.state.finished}已完成 / {this.state.list.length}总数</li> </ul> <Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/> </div> ); } } export default TodoList;
import React, { Component } from 'react'; class ListItem extends Component { constructor (props) { super(props); this.handleFinished = this.handleFinished.bind(this); this.handleDelete = this.handleDelete.bind(this); } handleFinished () { var status = this.props.item.status; status = (status === 0 ? 1 : 0); var obj = { id: this.props.item.id, name: this.props.item.name, status: status } this.props.finishedChange(obj); //执行父组件传来的方法 } handleDelete () { this.props.totalChange(this.props.item); //执行父组件传来的方法 } render () { const item = this.props.item; const unfinish = { backgroundColor: '#DFFCB5', color: '#2EB872', }; const finish = { backgroundColor: '#FFFA9D', color: '#FF9A3C', textDecoration: 'line-through' } var itemStyle = item.status === 0 ? unfinish : finish; return ( <li key={item.id} style={itemStyle}> <span onClick={this.handleFinished} id={item.id} className="check-btn" style={{backgroundColor: item.status === 0 ? '#fff' : '#A1EAFB'}} ></span> <span>{ item.name }</span> <span onClick={this.handleDelete} className="delete-btn">删除</span> </li> ); } } export default ListItem;
Comment utiliser vue pour implémenter la vérification de connexion
Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant
Utiliser jQuery pour dédupliquer et trier les tableaux
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!