Отправка действия Redux в событии Sortable js - PullRequest
Новая
       50

Отправка действия Redux в событии Sortable js

0 голосов
/ 02 марта 2020

Я хочу обновить свой магазин (отправив действие) после того, как я закончу sh, удалив элемент с помощью Sortable js. До сих пор я делал:

  • Оборачивая мои элементы в div с ref, чтобы я мог получить текущий DOM для моей функции Sortable.create 

    <div ref={ref} className="list-group">
    {items}
</div>

  • Получите и проверьте DOM, затем создайте Sortable с этим DOM и отправьте действие в его событие onEnd для обновления хранилища. 

    componentDidMount() {
let DOM = this.surveyQuestions.current;
let _this = this;
if (DOM)
{
    Sortable.create(DOM, {
        animation: 150,
        filter: ".no-dragging",
        swapThreshold: 1,

        // Element dragging ended
        onEnd: function (/**Event*/evt) {
            //get current html element
            let ele = evt.item;
            let child = ele.querySelector(".row .col .portlet-border");
            //data-id storing var
            let dataId = child.getAttribute("data-id");
            console.log(DOM);
            //add orderOffset to get the exact order of moved question in the state
            let newOrder = parseInt(evt.newIndex) + orderOffset;
            let oldOrder = parseInt(evt.oldIndex) + orderOffset;
            _this.props.dispatch(updateQuestionOrder(dataId, newOrder, oldOrder));
        },
    });
}}

Хранилище похоже обновляется с точным порядком. Тем не менее, дисплей не показывает это. Кажется, на мои изменения влияет Sortable, который будет работать нормально, если я ничего не отправлю.

Я что-то не так сделал? Пожалуйста, помогите!

...