• 技术文章 >web前端 >前端问答

    react 怎么实现删除功能

    藏色散人藏色散人2023-01-06 16:17:08原创118

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

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react怎么实现删除功能?

    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;

    推荐学习:《react视频教程

    以上就是react 怎么实现删除功能的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react怎么实现文件上传 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react不显示PDF生成信息怎么办• react跳转前记住页面状态怎么实现• 怎么用react实现引导页• react怎么实现文件上传
    1/1

    PHP中文网