javascript - ReactJS 删除动态元素

Question

我想删除程序中的动态元素，但我认为“this”有问题。当我单击“X”时，没有任何反应，控制台不显示任何错误。也许更有经验的人会帮助我。

('items'是状态数组)

主文件:

removeItemCity(i){
 let arr = this.state.items;
 arr.splice(i, 1);
 this.setState({items:arr})
}

renderItems(item,i){
return(<Tiles key = {'key_' + i} index = {i} delete = {() =>                                                                           
            {this.removeItemCity}}/>);  
}

render() {
        return(
        <div className = "BodyAppContainer">
            <div className = "grid" id="items">
                {this.state.items.map(this.renderItems) }
            </div>
         </div>
        );
     }

还有我的组件“Tiles”

 import React from 'react';

    class Tiles extends React.Component {

    constructor(props) {
        super(props);

    }

    remove(){
        this.props.delete(this.props.index);
    }

render() {

    return (

     <div className = "col-4_sm-6_xs-12 item">
            <h2>City : {this.props.index}</h2>
            <button className="removeButton" onClick={() => this.remove} >X</button>
        </div>
  );

  }
}
export default Tiles;

Answer 1

X 按钮的 onClick 属性没有执行任何操作:

onClick={() => this.remove}

当您单击时，它会调用该箭头函数。但那个箭头函数只有 this.remove ，这是方法的定义。帮助您的第一步是您应该使用括号调用该方法:

onClick={() => this.remove()}

同样的情况也适用于您的 renderItems() ，其中还缺少括号来在 delete 中执行函数调用 Prop 传递给 Tiles :

delete={() => {this.removeItemCity}}