删除元素的便捷方法答案

【问题标题】：Convenient way to delete element删除元素的便捷方法
【发布时间】：2021-08-09 03:57:26
【问题描述】：

我有一个动态填充的数组links，它呈现为一个列表。列表项有一个按钮，必须删除整个项目。

<ol>
    {links.map(function (element, index) {
        return (
            <li key={index}>
                <Link href={element}>{element}</Link>
                <Button onClick={ (event) => {} }>X</Button>
            </li>
        )
    })}
</ol>

显而易见的解决方案是从links 数组中删除当前索引。然而event 不能传递任何有用的指示li 有什么索引。寻找event.target.parentNode.parentNode.children.indexOf(event.target.parentNode) 链只是为了获取它的索引并不是最好的解决方案。如何更容易处理？

【问题讨论】：

标签： javascript reactjs next.js jsx

【解决方案1】：

我通过在onClick 函数中添加自定义函数并将index 传递给它来解决它。

function handleDelete(index) {
    console.log(index) // this is the index of the li's correspondent item in links
    const arr = [...links]
    arr.splice(index, 1) // remove the element
}
<ol>
    {links.map(function (element, index) {
        return (
            <li key={index}>
                <Link href={element}>{element}</Link>
                <Button onClick={ (event) => { handleDelete(index) } }>X</Button>
            </li>
        )
    })}
</ol>

【讨论】：