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

你的onClick for X按钮没有做任何事情：

onClick={() => this.remove}

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

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

同样的事情也适用于您的renderItems()，您在delete传递给Tiles的道具中也缺少括号来执行函数调用：

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

Answer 2

试试这个：

   <button className="removeButton" onClick={this.remove} >X</button>

ReactJS删除动态元素

2 个答案: