javascript - ReactJS删除动态元素

我想删除程序中的动态元素，但我认为“ 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>
        );
     }

我的组件“标题”

 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;

最佳答案

您的X按钮的onClick道具没有执行任何操作：

onClick={() => this.remove}

单击时，它将调用该箭头功能。但是该箭头函数只有this.remove，这是方法的定义。帮助您的第一步是您应该使用括号来调用该方法：

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

同样的情况适用于您的renderItems()，在这里您还缺少括号以在传递给delete的Tiles属性中执行函数调用：

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