{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 : 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.
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() } } export default TodoList; { this.state.list.map((value,index) => { return ( <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li> ) }) }
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!