从 react-beautiful-dnd 水平列表中删除单个项目

Question

我有 react-beautiful-dnd 水平多个列表（6 行，每行有相同的项目），每个列表中有相同的项目。 我想从每个列表中删除单个选定的项目，但是只有一个带有onClick 的按钮组件会在呈现列表本身时触发onClick。如何配置列表，以便在单击关闭/删除 (x) 按钮时从该列表中删除单个项目？

下面是我的代码，

    import React, { Component } from 'react';
    import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
    import {Button, Icon} from 'semantic-ui-react'

    // a little function to help us with reordering the result
    const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
    };

    const grid = 12;
    const getItemStyle = (isDragging, draggableStyle) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: 'none',
    padding: grid / 2,
    margin: `0 ${grid}px 0 0`,

    // change background colour if dragging
    background: isDragging ? 'lightgreen' : 'lightgray',

    // styles we need to apply on draggables
    ...draggableStyle,
    });

    const getListStyle = isDraggingOver => ({
    background: isDraggingOver ? 'lightblue' : 'white',
    display: 'flex',
    padding: grid,
    overflow: 'auto',
    });

    class DragAndDrop extends Component {
    constructor(props) {
        super(props);
        this.state = {
        items: this.props.uniqueEntries
        };
        this.onDragEnd = this.onDragEnd.bind(this)
        this.removeSubject = this.removeSubject.bind(this)
    }

    onDragEnd(result) {
        // dropped outside the list
        if (!result.destination) {
        return;
        }
        const items = reorder(
        this.state.items,
        result.source.index,
        result.destination.index
        );

        this.setState({
        items,
        });
    }

    componentWillReceiveProps(newProps){
        this.setState({
        items : newProps.uniqueEntries
        })

    }

    removeItem = (index) => {
        this.state.items.splice(index, 1)
    }

    render() {
        return (
        <DragDropContext onDragEnd={this.onDragEnd}>
            <Droppable droppableId="droppable" direction="horizontal">
            {(provided, snapshot) => (
                <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
                {...provided.droppableProps}
                >
                {this.state.items.map((item, index) => (
                    <Draggable key={item.Id} draggableId={item.Id} 
                   index={index}>
                    {(provided, snapshot) => (
                        <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                        )}
                        >
                        <Button icon size='mini'
                        style={{backgroundColor : 'lightgray' ,padding: 
                        '0', float: 'right'}}
                        onClick = {this.removeItem(index)}>
                        <Icon name='close' />
                        </Button>
                        {item.name}
                        </div>
                    )}
                    </Draggable>
                ))}
                {provided.placeholder}
                </div>
            )}
            </Droppable>
        </DragDropContext>
        );
    }
   }

    export default DragAndDrop

Answer 1

此错误的注释可能会影响您以后和未来的观众。 ?

你不应该直接改变状态。它会产生一些副作用或根本没有。

我还建议您生成唯一 ID，因为如果您创建更多列表，它也会产生一些意想不到的结果，即使 react-beautiful-dnd 不会注意到。

如果您想更新或删除状态数据，请使用setState()。首先使用副本修改现有数据。然后分配新值。

removeItem(index) {

// do magic here to filter out the unwanted element

// Update via 'setState'
        this.setState({
            items : newModifiedItems
        })
}

举个例子，我的试用方法如下：

removeItem(e) {
        e.preventDefault();

        // give your single list a className so you can select them all
        const sourceList = document.querySelectorAll(".list-name");

        const arrList= Array.from(sourceList);

        // make shallow copy of your state data
        const newItems = Array.from(this.state.items);

        // Find index element from whole list Arr by traversing the DOM
        const removeItemIndex = arrList.indexOf(e.target.parentElement);

        // Remove it
        newItems.splice(removeItemIndex, 1);

        this.setState({
            items: newItems 
        })

    }

Answer 2

我发现了为什么它在渲染时触发，而不是传递我正在启动它的函数，所以通过循环它被调用。然后我这样做了，它奏效了。这可能会对可能面临类似问题的人有所帮助。

<Button icon size='mini'
                  style={{backgroundColor : 'lightgray' ,padding: '0', 
  float: 'right', marginLeft:'15px'}}
                  onClick = {() => this.removeItem(index)}>
                  <Icon name='close' />
                </Button>