Deleting individual items from react-beautiful-dnd horizontal list

问题

I have react-beautiful-dnd horizontal multiple list(6 rows with the same items in each row) with the same items in each list. I want to delete individual selected items from each list, but just having a button component with onClick fires the onClick while rendering the lists itself. How do i configure the list so that an individual item is deleted from that list when i click on the close/delete (x) button?

Below, is my code,

    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

回答1:

I found out why it was firing at render, instead of passing the function i was initiating it so through the loop it was getting called. Then i did this and it worked. May be this will help someone who might face a similar issue.

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

来源：https://stackoverflow.com/questions/50612683/deleting-individual-items-from-react-beautiful-dnd-horizontal-list