分享更有价值
被信任是一种快乐

react如何实现删除功能

文章页正文上

这篇文章主要介绍“react如何实现删除功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现删除功能”文章能帮助大家解决问题。 react实现删除功能的方法:1、给li标签添加一个点击事件,代码如“ React实现TodoList删除功能要实现点击列表中的某一项,就把该项删除1.给li标签添加一个点击事件:handleItemClick


  • {value}
  • 2.点击事件函数:

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

    完整代码如下:

    importReact,{Component,Fragment}from'react';
    classTodoListextendsComponent{
    constructor(props){
    super(props);
    this.state={
    inputValue:'',
    list:[]
    }
    }
    handleInputChange(e){
    this.setState({
    inputValue:e.target.value
    })
    }
    //松开键盘会触发该事件
    handleKeyUp(e){
    //判断是不是点的回车键
    if(e.keyCode===13){
    constlist=[...this.state.list,this.state.inputValue];
    this.setState({
    list:list,
    inputValue:''
    })免费云主机、域名
    }
    }
    //列表点击事件
    handleItemClick(index){
    constlist=[...this.state.list];
    list.splice(index,1);
    this.setState({
    list:list
    })
    }
    render(){
    return(
    
    
    
      { this.state.list.map((value,index)=>{ return(
    • {value}
    • ) }) }
    ) } } exportdefaultTodoList;

    关于“react如何实现删除功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

    相关推荐: jquery鼠标的事件方法怎么使用

    这篇“jquery鼠标的事件方法怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery鼠标的事件方法怎么使用”文章吧。 jquery…

    文章页内容下
    赞(0) 打赏
    版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
    文章页正文下
    文章页评论上

    云服务器、web空间可免费试用

    宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

    主机选购导航云服务器试用

    登录

    找回密码

    注册