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

Maison  >  Article  >  interface Web  >  Comment implémenter la fonction de suppression dans React

Comment implémenter la fonction de suppression dans React

藏色散人
藏色散人original
2023-01-06 16:17:082810parcourir

Comment implémenter la fonction de suppression dans React : 1. Ajoutez un événement click à la balise li, avec un code tel que "7ff0d049fcfbcd3d582b9c267fb1c256"; 2. Utilisez l'événement de clic de liste "handleItemClick(index) {...}" pour implémenter la fonction de suppression.

Comment implémenter la fonction de suppression dans React

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn