Question

我正在尝试在用户点击它时从<ul>删除该项目。这是我的List组件：

class List extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        //What goes here?
    }

    render() {
        const list = this.props.items.map((x, index) => {
            return <li key={index} onClick={this.handleClick}>{index+1}. {x}</li>
        });

        return (
            <ul className="list">
                {list}
            </ul>
        )
    }
}

handleClick函数在用户点击其中一个<li>元素时运行。如何获取调用该函数的元素的{index}，然后使用它从数组中删除它？

Answer 1

您可以使用JS#arrow function与JS#function curry一起使用。

const list = this.props.items.map((x, index) => {
      return <li key={index} onClick={(index) => this.handleClick(index)}>{index + 1}. {x}</li>
    });

这将创建一个新函数，使用给定的参数调用handleClick

带有咖喱功能的

handleClick：。

handleClick = (event) => { // get event
  return function (indexLI) {
    console.log(indexLI); //get index
    //your logic to delete item for LI and update state here
  }
}

handleClick将同时具有用户定义的参数和事件对象

在React中单击列表项时删除它

1 个答案: