How to implement the delete function in react-Front-end Q&A-php.cn

How to implement the delete function in react

藏色散人

Release： 2023-01-06 16:17:08

Original

2780 people have browsed it

React method to implement the delete function: 1. Add a click event to the li tag, with code such as "
{value}
"; 2. Use the list click event "handleItemClick(index) {...}" to implement the deletion function.

How to implement the delete function in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to implement the delete function in react?

React implements the TodoList deletion function

To realize clicking on an item in the list, delete the item

1. Add a click event to the li tag ：handleItemClick

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

Copy after login

2. Click event function:

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

Copy after login

The complete code is as follows:

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;

Copy after login

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement the delete function in react. For more information, please follow other related articles on the PHP Chinese website!