本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么实现删除功能?React实现TodoList删除功能要实现点击列表中的某一项,就把该项删除1.给li标签添加一个点击事件:handleIte
本教程操作环境: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 怎么实现删除功能的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react 怎么实现删除功能
本文链接: https://www.lsjlt.com/news/206813.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0