react怎样实现删除功能

发布时间：2023-07-11 11:03:05 所属栏目：教程来源：互联网

导读： 　　这篇文章主要介绍“react如何实现删除功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现删除功能”文

　　这篇文章主要介绍“react如何实现删除功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现删除功能”文章能帮助大家解决问题。

　　react实现删除功能的方法：1、给li标签添加一个点击事件，代码如“ <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>”；2、通过列表点击事件“handleItemClick(index) {...}”实现删除功能即可。

　　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(

　　           <Fragment>

　　           <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)}/>

　　           <ul>

　　               {

　　                   this.state.list.map((value,index) => {

　　                       return (

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

　　                       )

　　                   })

　　               }

　　           </ul>

　　           </Fragment>

　　       )

　　   }

　　}

　　export default TodoList;

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!