react 怎么实现删除功能-OK资源网

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视频教程》

内容转载于网络，请读者自行鉴别

THE END

运营
# 教程