React实现点击删除列表中对应项(2)

这就能跑了，这有个小坑，稍有不慎你发现你怎么删都是删列表的最后一项，其实数据操作没问题，关键是这个存在感比较低的key，必须特定项有给定的key你用动态的index他就懵了，不知道删哪个了，他就吧最后一个删了。废话不多说(该程序因为key键取值的问题有一个小问题)：

Code pen 地址：

整体代码：

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设计思路，但第一种有时候解决问题很方便。