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

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas

Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas

藏色散人
藏色散人asal
2023-01-06 16:17:082826semak imbas

Cara melaksanakan fungsi padam secara bertindak balas: 1. Tambahkan acara klik pada tag li, dengan kod seperti "5b49c58954d535c97d5c026b7aed46f2 {value}bed06894275b65c1ab86501b08a632eb"; 2. Gunakan acara klik senarai "handleItemClick(index) {...}" untuk melaksanakan fungsi pemadaman.

Bagaimana untuk melaksanakan fungsi padam dalam bertindak balas

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn