Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Löschfunktion in React

So implementieren Sie die Löschfunktion in React

藏色散人
藏色散人Original
2023-01-06 16:17:082810Durchsuche

So implementieren Sie die Löschfunktion in React: 1. Fügen Sie dem li-Tag ein Klickereignis hinzu, mit Code wie „7ff0d049fcfbcd3d582b9c267fb1c256"; 2. Verwenden Sie das Listenklickereignis "handleItemClick(index) {...}", um die Löschfunktion zu implementieren.

So implementieren Sie die Löschfunktion in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man die Löschfunktion in React?

React implementiert die TodoList-Löschfunktion

Um das Klicken auf ein Element in der Liste zu realisieren, löschen Sie das Element

1. Fügen Sie dem li-Tag ein Klickereignis hinzu: handleItemClick

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

. Klicken Sie auf die Ereignisfunktion:

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

Der vollständige Code lautet wie folgt:

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;

Empfohlenes Lernen: „Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Löschfunktion in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn