Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas

Cara melaksanakan fungsi padam secara bertindak balas: 1. Tambahkan acara klik pada tag li, dengan kod seperti "

{value}

"; 2. Gunakan acara klik senarai "handleItemClick(index) {...}" untuk melaksanakan fungsi pemadaman.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas?

React melaksanakan fungsi pemadaman TodoList

Untuk merealisasikan klik pada item dalam senarai, padamkan item

Tambah acara klik pada teg li : handleItemClick

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

2. Fungsi acara klik:

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

Kod lengkap adalah seperti berikut:

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;

Pembelajaran yang disyorkan: "react tutorial video》

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!