键从数组中删除一个元素 [英] Delete an element by key from Array

问题描述

我使用库 react-sortable-hoc 来拖放元素，但是库文档没有删除项目的任何操作.我想在单击关闭按钮时删除、拖放项目.哪种方法适合从对象中通过键删除元素?

反应

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

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

);});构造函数(道具:任何){超级(道具)；this.state = {项目: [{身份证":0，链接":https://via.placeholder.com/150"},{身份证":1，链接":https://via.placeholder.com/150"}],};}public onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) =>{this.setState({项目:arrayMove(this.state.items, oldIndex, newIndex),});};public onRemove(e: { target: { value: any; }; }) {const array = [...this.state.items];const index = array.indexOf(e.target.value)如果(索引！== -1){array.splice(index, 1);this.setState({items: array});}}<SortableList items={this.state.items}onSortEnd={this.onSortEnd}锁轴=xy"轴=xy"/>

解决方案

更新:

您好，我弄清楚出了什么问题，并在您的应用程序上成功执行了删除事件.

所有内容都在这个 codesandbox 中用注释说明.

==========

我修改了这个，它应该使用 Array 的 filter 方法完成所需的操作.

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

I used library react-sortable-hoc for drag and drop element, but the library documentation does not have any actions for delete items. I want to delete, drag and drop item when click on close button. Which method is right for removing elements by key from object?

React

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" />

解决方案

UPDATED:

Hi there, I figured out what went wrong and made a successful remove event on your application.

Everything is illustrated with comments at this codesandbox.

=========

I modified this one, it should do the required using Array's filter method.

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});
}

这篇关于键从数组中删除一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！