React：添加click - 删除操作

条件判断

传入index，

if(this.state.isshow){ person=( <div> { this.state.persons.map((person,index)=>{ return <Person name={person.name} age={person.age} click={this.deletePersonHandler.bind(this,index)} /> }) } </div> ); }else{ person=null; }

对array进行splice操作

注意const persons为指向array的指针，该array可以被改变，而persons并未被改变；

deletePersonHandler=(personIndex)=>{ const persons = this.state.persons; persons.splice(personIndex,1); this.setState({persons:persons}); }

缺点

上述代码的person为state.persons的地址，splice改地址的array会造成不稳定因素； 优化 改变改array的copy，再传回；

方法1：slice

deletePersonHandler=(personIndex)=>{ const persons = this.state.persons.slice(); //返回一个copy persons.splice(personIndex,1); this.setState({persons:persons}); }

方法2：…

deletePersonHandler=(personIndex)=>{ const persons = [...this.state.persons]; //内容复制 persons.splice(personIndex,1); this.setState({persons:persons}); }