React实现点击删除列表中对应项
156 浏览量
2020-08-31
17:19:07
上传
评论
收藏 77KB PDF 举报
React实现点击删除列表中对应项实现点击删除列表中对应项
本文主要介绍了React 点击删除列表中对应项的方法。具有一定的参考价值，下面跟着小编一起来看下吧
点击删除按钮，删除列表中对应项本来是React比较基础的应用，可是应用情况变得复杂了以后，我还真想了一会儿才搞定。
简化一下应用场景：点击新增按钮，增加一条输入框，点击输入框旁边的按钮，删除该输入框（不能删错了啊）。
先说第一种方法先说第一种方法
问题刚上手，首先规划级别：一个输入框和对应删除按钮为一个子组件，整体为父组件即可方便处理。
注意的点：生成的一坨输入框是一个数组，为了准确删掉对应项，生成时要编号。点击删除按钮要反馈对应编号，然后进行删
除。
现在的逻辑是：整个待展示列表（由子组件组成的数组）是个state，添加按钮会增加一个元素到这个state里面，添加的方法
如下：
add(){
var lists=this.state.lists;
lists.push(<List key={this.state.lists.length} index={this.state.lists.length} delete={this.delete}/>);
this.setState({lists:lists})
}
注意一点，这个index属性是固定的，子组建生成后就固定了，这就为你未来挖了一个坑。
删除按钮当然就是从这个state列表里删除对应元素了，问题一来了，我怎么知道是第几个元素？一拍脑袋这还不简
单，event.target 获取点击的标签，在标签上写个index属性告诉delete方法是第几个元素不就得了？试了发现不行，看看文
档，event.target确实获取dom元素没毛病，但是index这个属性原生dom根本不承认啊，怎么办？data-index就行了，前面加
data- 就是dom承认的自定义属性了。
写完了又想起了两个方法，一个是在删除按钮绑定删除事件的时候，.bind（this，index），index是你准备删掉的是第几个或
者表示出来你要删哪个就行。另一个是搞个闭包，就能把index参数传进去了（事件绑定一个立即执行的方程传入参数，该方
程返回目标方程）。
第一个问题解决，删除的方法如下：
delete(e){
var index=e.target.getAttribute("data-index");
var lists=this.state.lists;
lists.splice(index,1);
this.setState({lists:lists})
}
data-index告诉你要删除第几个元素，然后把它从state里踢出去就行了。这回掉进了一个真正意义上的坑：有时候删的不是对
应的元素！乱套了！
好吧，我沉思了5分钟，想到了为什么：生成列表的时候index已经固定，但删除列表的时候我们只告诉他删除的是第index
项！问题严重了，举个例子，有两项，index 0和1 你点0，好吧第0项删掉了，你再点1，疑？没反应了，因为你打算删除第1
项，而列表中目前只有第0项（就是原来的第一项，原来的第0项删除后他就成了第0项）！这会导致各种乱套，考虑到生成列
表的index是列表长度表示的就更乱了。
解决方式：delete方法里修改一行：
lists.splice(index,1,"");
好了，删除的元素我用空字符串代替，这样顺序和删除的项，还有以后添加的项的index都不会乱了，给自己点赞。到这里第
一种方法实现了目标。
Code pen 地址：http://codepen.io/huanqingli/pen/dNyQez
完整代码：完整代码：
class List extends React.Component {
render() {
return (<div><input type="text" defaultValue={this.props.index}/>
<span onClick={this.props.delete} data-index={this.props.index}>X</span></div>)
}
}
class Lists extends React.Component {
constructor(props) {
super(props);
this.add=this.add.bind(this);
this.delete=this.delete.bind(this);
资源评论
