Comment implémenter la fonction de suppression dans React

Comment implémenter la fonction de suppression dans React : 1. Ajoutez un événement click à la balise li, avec un code tel que "

"; 2. Utilisez l'événement de clic de liste "handleItemClick(index) {...}" pour implémenter la fonction de suppression.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter la fonction de suppression dans React ?

React implémente la fonction de suppression de TodoList

Pour pouvoir cliquer sur un élément de la liste, supprimez l'élément

1 Ajoutez un événement de clic à la balise li : handleItemClick

<li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>

2. Fonction d'événement de clic :

// 列表点击事件
   handleItemClick(index) {
       const list = [...this.state.list];
       list.splice(index, 1);
       this.setState({
           list: list
       })
   }

. Le code complet est le suivant :

import React, {Component, Fragment} from 'react';
class TodoList extends Component {
   constructor(props) {
       super(props);
       this.state = {
           inputValue: '',
           list: []
       }
   }
   handleInputChange(e) {
       this.setState({
           inputValue: e.target.value
       })
   }
   // 松开键盘会触发该事件
   handleKeyUp(e) {
       // 判断是不是点的回车键
       if (e.keyCode === 13) {
           const list = [...this.state.list, this.state.inputValue];
           this.setState({
               list: list,
               inputValue: ''
           })
       }
   }
   // 列表点击事件
   handleItemClick(index) {
       const list = [...this.state.list];
       list.splice(index, 1);
       this.setState({
           list: list
       })
   }
   render() {
       return(
           
           
           

               {
                   this.state.list.map((value,index) => {
                       return (
                       <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>
                       )
                   })
               }
           
           
               
       )
   }
}
export default TodoList;

Apprentissage recommandé : "tutoriel vidéo React"

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!