Удаление отдельных предметов из горизонтального списка реагировать-красиво-нд

Question

У меня есть горизонтальный множественный список реагировать-красиво-нд (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

Я выяснил, почему он запускается при рендере, вместо того, чтобы передавать функцию, которую я инициировал, так что через цикл он вызывался.Тогда я сделал это, и это сработало.Может быть, это поможет кому-то, кто может столкнуться с подобной проблемой.

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