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);
this.state={
lists:[]
}
}
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})
}
delete(e){
var index=e.target.getAttribute("data-index");
var lists=this.state.lists;
console.log(index)
lists.splice(index,1);
this.setState({lists:lists})
}
render() {
return (<div>
<span onClick={this.add}>添加</span>
{this.state.lists}
</div>)
}
}
ReactDOM.render(
<Lists/>,
document.getElementById('lists')
);
这种方法有利有弊，所以我找到了第二种方法，具体情况择优使用。
第二种方法。总体来讲推荐这种方法。
在state里保存要展示的数据，在render里动态生成子组件组，然后添加删除都是操作保存数据的state，render里的子组件会自动刷新。这种方式应该是更贴近React思路的，用数据展现界面。如果你要展现一组数据，这种方法很自然，但如果展现的是一个动态的表单，稍微麻烦一点，但也可以做，而且我依然推荐用这种方式。
这种方法做个todolist就很简单，这里依然做上文的例子，稍微麻烦一点，也会理解的更深入一点。
整体结构和第一种方法一样，只不过这次state里面不是子组件，先用空字符串组成的数组代替，仅仅是为了render的时候知道有几个子组件而已。添加的时候也要push空字符串，等输入框输入数据后，更新state中的内容，做到数据和界面同步。
render子组件的部分：
{this.state.lists.map(function (item,index) {
return <List key={index} index={index} delete={this.delete}/>
}.bind(this))}
添加的方法变成：
add(){
var lists=this.state.lists;
lists.push("");
this.setState({lists:lists})
}
这就能跑了，这有个小坑，稍有不慎你发现你怎么删都是删列表的最后一项，其实数据操作没问题，关键是这个存在感比较低的key，必须特定项有给定的key你用动态的index他就懵了，不知道删哪个了，他就吧最后一个删了。废话不多说(该程序因为key键取值的问题有一个小问题)：
Code pen 地址：http://codepen.io/huanqingli/pen/xgxNYN
整体代码：
class List extends React.Component {
constructor(props){
super(props);
this.upData=this.upData.bind(this);
}
upData(e){
this.props.upData(this.props.index,e.target.value)
}
render() {
return (<div><input type="text" onBlur={this.upData} defaultValue={this.props.item?this.props.item:""}/>
<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);
this.upData=this.upData.bind(this);
this.state={
lists:[]
}
}
add(){
var lists=this.state.lists;
lists.push("");
this.setState({lists:lists})
}
delete(e){
var index=e.target.getAttribute("data-index");
var lists=this.state.lists;
lists.splice(index,1);
this.setState({lists:lists})
}
upData(i,x){
var lists=this.state.lists;
lists[i]=x;
console.log(lists);
this.setState({lists:lists});
}
render() {
return (<div>
<span onClick={this.add}>添加</span>
{this.state.lists.map(function (item,index) {
return <List key={item?item:index} index={index} delete={this.delete} upData={this.upData} item={item}/>
}.bind(this))}
</div>)
}
}
ReactDOM.render(
<Lists />, document.getElementById('lists')
)
这种方法经常也会有点小坑，也比较好解决。
总结：两种方法各有利弊，推荐第二种，符合REACT设计思路，但第一种有时候解决问题很方便。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
在 React 中,可以通过 JavaScript 的条件语句来动态渲染组件或元素,下面给大家分享几种常用的在 React 中处理条件渲染的方法,感兴趣的朋友跟随小编一起看看吧2024-08-08
详解React如何使用useReducer高阶钩子来管理状态
useReducer是React中的一个钩子,用于替代 useState来管理复杂的状态逻辑,本文将详细介绍如何在React中使用 useReducer高阶钩子来管理状态,感兴趣的可以了解下2025-02-02
这篇文章主要为大家详细介绍了react使用axios进行api网络请求的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起，这篇文章主要介绍了react-redux的connect详解,需要的朋友可以参考下2023-01-01
本篇文章主要介绍了探究react-native 源码的图片缓存问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08![React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent](//img.jbzj.com/images/xgimg/bcimg6.png)
React报错Type '() => JSX.Element[]&apos
这篇文章主要为大家介绍了React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法
这篇文章主要介绍了react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了react中Suspense的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用2022-09-09
![React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论