response-beautifull-dnd limit количество предметов

Question

Я работаю над React и DND, я экспериментирую с примером. Например, у меня есть два столбца, между которыми я могу перетаскивать карточки туда-сюда, что отлично работает, теперь я хочу, чтобы второй столбец содержал не более 4 элементов, но элементы можно перетаскивать. В документации я прочитал, что это было сделано путем установки isDropDisabled на true. Тогда я действительно не могу больше тянуться к этой колонке, и я могу уйти. Теперь я попытался повлиять на это с помощью переменной this.state.isUnlocked. Поэтому, если их больше 4, это значение будет истинным, в противном случае это значение будет ложным. Только код не отвечает на this.state.isUnlocked. Только если я наберу его напрямую, но тогда он больше не будет переменным. Есть ли кто-нибудь, кто может мне помочь с этим?

Это мой код:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Row, Col, Card, CardHeader, CardBody, Button } from "shards-react";

// fake data generator
const getItems = (count, offset = 0) =>
    Array.from({ length: count }, (v, k) => k).map(k => ({
        id: `item-${k + offset}`,
        content: `item ${k + offset}`
    }));

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

/**
 * Moves an item from one list to another list.
 */
const move = (source, destination, droppableSource, droppableDestination) => {
    const sourceClone = Array.from(source);
    const destClone = Array.from(destination);
    const [removed] = sourceClone.splice(droppableSource.index, 1);

    destClone.splice(droppableDestination.index, 0, removed);

    const result = {};
    result[droppableSource.droppableId] = sourceClone;
    result[droppableDestination.droppableId] = destClone;

    return result;
};

const grid = 8;

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

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

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

const getListStyle = isDraggingOver => ({
    background: isDraggingOver ? 'lightblue' : 'lightgrey',
    padding: grid,
    width: 250
});

class qSortOverview extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: getItems(10),
            selected: getItems(2, 10),
            iUnlocked: false,
        };
        this.canvasRef = React.createRef();
      }


    /**
     * A semi-generic way to handle multiple lists. Matches
     * the IDs of the droppable container to the names of the
     * source arrays stored in the state.
     */
    id2List = {
        droppable: 'items',
        droppable2: 'selected'
    };

    getList = id => this.state[this.id2List[id]];

    onDragEnd = result => {
        const { source, destination } = result;

        // dropped outside the list
        if (!destination) {
            return;
        }

        if (source.droppableId === destination.droppableId) {
            const items = reorder(
                this.getList(source.droppableId),
                source.index,
                destination.index
            );

            let state = { items };

            if (source.droppableId === 'droppable2') {
                state = { selected: items };

            }

            this.setState(state);

        } else {
            const result = move(
                this.getList(source.droppableId),
                this.getList(destination.droppableId),
                source,
                destination
            );

            this.setState({
                items: result.droppable,
                selected: result.droppable2
            });
            //Linker rij
            console.log(this.state.items);
            if(this.state.items.length > 4){
                console.log('to much items');
            }
            //Rechter rij
            console.log(this.state.selected);
            if(this.state.selected.length > 4){
                this.setState({
                    isUnlocked: true,
                })

            }
        }
    };



    // Normally you would want to split things out into separate components.
    // But in this example everything is just done in one place for simplicity
    render() {
        return (
            <DragDropContext onDragEnd={this.onDragEnd}>
                <Row>
                <Col lg="6" md="6" sm="6" className="mb-4">
                <Droppable droppableId="droppable" >
                    {(provided, snapshot) => (
                        <div
                            ref={provided.innerRef}
                            style={getListStyle(snapshot.isDraggingOver)}>
                            {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
                                            )}>
                                            {item.content}
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
                </Col>
                <Col lg="6 " md="6" sm="6" className="mb-4">
                <Droppable droppableId="droppable2" isDropDisabled={this.state.isUnlocked}>
                    {(provided, snapshot) => (
                        <div
                            ref={provided.innerRef}
                            style={getListStyle(snapshot.isDraggingOver)}>
                            {this.state.selected.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
                                            )}>
                                            {item.content}
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
                </Col>
                </Row>
            </DragDropContext>
        );
    }
};

export default qSortOverview;

На данный момент правая колонка содержит 2 элемента, а если есть 4 элемента, то этого не должно быть. Дольше можно будет добавлять предметы, просто удаляйте их.