Heim > Artikel > Web-Frontend > So implementieren Sie die Löschfunktion in React
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.
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() } } export default TodoList; { this.state.list.map((value,index) => { return ( <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li> ) }) }
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!