react实现删除功能的方法：1、给li标签添加一个点击事件，代码如“ 5b49c58954d535c97d5c026b7aed46f2{value}bed06894275b65c1ab86501b08a632eb”；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 怎么实现删除功能的详细内容。