Reactjs 从数组中按键删除元素

我将库用于拖放元素，但库文档没有任何删除项的操作。我想删除，拖放项目时，点击关闭按钮。哪种方法适合按键从对象中删除元素

反应

const SortableItem = SortableElement(({ value }: { value: string }, onRemove: any) =>
    <div className="dragItems" style={{ background: 'gray' }}>
        <img src={value} alt="" />
        <button className="dragCloseBtn" onClick={() => onRemove(any)} />
    </div>

);

const SortableList = SortableContainer(({ items }: { items: string[] }) => {
    return (
        <div className="dragAndDrop">
            {items.map((value, index) => (
                <SortableItem key={'item-${index}'} index={index} value={value} />
            ))}
        </div>
    );
});

constructor(props: any) {
    super(props);
    this.state = {
        items: [
            { 
                "id": 0, 
                "link": "https://via.placeholder.com/150"
            },
            { 
                "id": 1, 
                "link": "https://via.placeholder.com/150"
            }
        ],
    };
}

public onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
    this.setState({
        items: arrayMove(this.state.items, oldIndex, newIndex),
    });
};

public onRemove(e: { target: { value: any; }; }) {
    const array = [...this.state.items]; 
    const index = array.indexOf(e.target.value)
    if (index !== -1) {
        array.splice(index, 1);
        this.setState({items: array});
    }
}

<SortableList items={this.state.items}
              onSortEnd={this.onSortEnd}
              lockAxis="xy"
              axis="xy" />

const SortableItem=SortableElement（（{value}:{value:string}，onRemove:any）=>
onRemove（任何）}/>
);
const SortableList=SortableContainer（（{items}:{items:string[]}）=>{
返回(
{items.map（（值，索引）=>(
))}
);
});
构造器（道具：任何）{
超级（道具）；
此.state={
项目：[
{ 
“id”：0，
“链接”：https://via.placeholder.com/150"
},
{ 
“id”：1，
“链接”：https://via.placeholder.com/150"
}
],
};
}
public onSortEnd=（{oldIndex，newIndex}:{oldIndex:number，newIndex:number}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
public onRemove（e:{target:{value:any；}；}）{
常量数组=[…this.state.items]；
const index=array.indexOf（e.target.value）
如果（索引！=-1）{
阵列拼接（索引1）；
this.setState（{items:array}）；
}
}

更新：

您好，我发现了哪里出了问题，并在您的应用程序上成功地执行了删除事件

在这里，一切都用评论来说明

=========

我修改了这个，它应该使用数组的

filter

方法执行所需的操作

public onRemove(e: { target: { value: any; }; }) {
    let array = [...this.state.items];
    const intId = parseInt(e.target.value, 10);
    array = array.filter(item => item.id !== intId);
    this.setState({items: array});
}

---

更新：

您好，我发现了哪里出了问题，并在您的应用程序上成功地执行了删除事件

在这里，一切都用评论来说明

=========

我修改了这个，它应该使用数组的

filter

方法执行所需的操作

public onRemove(e: { target: { value: any; }; }) {
    let array = [...this.state.items];
    const intId = parseInt(e.target.value, 10);
    array = array.filter(item => item.id !== intId);
    this.setState({items: array});
}

---

因此，您的代码中几乎没有问题！你似乎对react如何与道具传递相混淆。您必须传递删除所需的方法。您应该将它绑定到您将调用它的类中

• onRemove应绑定到当前上下文
• onRemove应该在组件树中向下传递
• 查看我的//[NOTE]=>注释以获取更多解释
• 工作代码沙盒是

import*as React from“React”；
从“react dom”导入*作为react dom；
进口{
arrayMove，
可分拣集装箱，
可排序元素
}从“react sortable hoc”；
//[注意]=>值包含包含回调的相关对象。Onclick使用相关id调用它
const SortableItem=SortableElement(
（{value}:{value:any}，onRemove:any）=>(
value.onRemove（value.id）}>
{" "}
X{'}
)
);
const SortableList=SortableContainer（（{items}:{items:string[]}）=>{
返回(
{items.map（（值，索引）=>(
))}
);
});
类SortableComponent扩展了React.Component{
构造函数（props:{}）{
超级（道具）；
//[注意]=>对绑定到当前上下文的每个元素发送回调
//这就像告诉函数从哪里调用函数一样
此.state={
项目：[
{
id:0，
链接：“https://via.placeholder.com/150",
onRemove:this.onRemove.bind（this）
},
{
id:1，
链接：“https://via.placeholder.com/150",
onRemove:this.onRemove.bind（this）
}
]
};
}
公共渲染（）{
返回；
}
公共onSortEnd=({
旧索引，
新索引
}: {
oldIndex：编号；
新索引：编号；
}) => {
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex）
});
};
//[注意]=>使用id筛选并设置新的项目集
公共onRemove（id）{
console.log（id）；
让数组=[…this.state.items]；
const intId=parseInt（id，10）；
array=array.filter（（item:any）=>item.id！==intId）；
this.setState（{items:array}）；
}
}
render（，document.getElementById（“根”））；

所以您的代码中几乎没有问题！你似乎对react如何与道具传递相混淆。您必须传递删除所需的方法。您应该将它绑定到您将调用它的类中

• onRemove应绑定到当前上下文
• onRemove应该在组件树中向下传递
• 查看我的//[NOTE]=>注释以获取更多解释
• 工作代码沙盒是

import*as React from“React”；
从“react dom”导入*作为react dom；
进口{
arrayMove，
可分拣集装箱，
可排序元素
}从“react sortable hoc”；
//[注意]=>值包含包含回调的相关对象。Onclick使用相关id调用它
const SortableItem=SortableElement(
（{value}:{value:any}，onRemove:any）=>(
value.onRemove（value.id）}>
{" "}
X{'}
)
);
const SortableList=SortableContainer（（{items}:{items:string[]}）=>{
返回(
{items.map（（值，索引）=>(
))}
);
});
类SortableComponent扩展了React.Component{
构造函数（props:{}）{
超级（道具）；
//[注意]=>对绑定到当前上下文的每个元素发送回调
//这就像告诉函数从哪里调用函数一样
此.state={
项目：[
{
id:0，
链接：“https://via.placeholder.com/150",
onRemove:this.onRemove.bind（this）
},
{
id:1，
链接：“https://via.placeholder.com/150",
onRemove:this.onRemove.bind（this）
}
]
};
}
公共图书馆