ホームページ > 記事 > ウェブフロントエンド > Reactでdelete関数を実装する方法
削除関数を実装するための React メソッド: 1. "200caf8683ddd95a97bfadb8b090146b {value}bed06894275b65c1ab86501b08a632eb"; 2. リストクリックイベント「handleItemClick(index) {...}」を使用して削除関数を実装します。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
react で削除関数を実装するにはどうすればよいですか?
React は TodoList 削除機能を実装しています
リスト内の項目をクリックを実現するには、項目を削除します
1. li タグにクリック イベントを追加します:handleItemClick
<li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>
2. クリック イベント関数:
// 列表点击事件 handleItemClick(index) { const list = [...this.state.list]; list.splice(index, 1); this.setState({ list: list }) }
完全なコードは次のとおりです:
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> ) }) }
推奨される学習: 「react ビデオ チュートリアル 」
以上がReactでdelete関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。