Блог

После добавления карты и добавления данных в таблицу я хочу обновить информацию о картах с помощью исходного идентификатора карты, который возвращается из таблицы. Для этого я использовал eventBusHandle следующим образом :

 import React, {Component, useEffect, useState} from 'react';
import Board from "react-trello";


const TaskBoard = (props) =>{
const [eventBus, setEventBus] = useState(undefined);

useEffect(() => {
        if (card.length !== 0) {
            eventBus.publish({type: 'ADD_CARD', laneId:card.column_id, cards: {id: card.id, title: card.title, label: "1 sec", description: card.description}});
        }
    }, [card.length]);

return(
        <Board
        id="board1"
        components={components}
        style={{
            background: '#F1F2F4'
        }}
        data={boardData}
        draggable
        handleLaneDragStart={handleLaneDragStart}
        handleLaneDragEnd={handleLaneDragEnd}
        canAddLanes
        onLaneAdd={onLaneAdd}
        onLaneDelete={onLaneDelete}
        handleDragEnd={handleDragEnd}
        onCardDelete={onCardDelete}
        onCardAdd={onCardAdd}
        editable
        eventBusHandle={setEventBus}
        />
    );

}

 

Мне нужно обновить идентификатор реальной карты для удаления или перемещения в другое место.

В вашем коде нет способа узнать, откуда берется информация о карте. Метод публикации обновит информацию о плате «определенной» информацией. Таким образом, вам нужно иметь определенную карту, прежде чем использовать этот метод.

Кроме того, setEventBus происходит после того, как плата создана (смонтирована). Если вы пытаетесь обновить плату с помощью publish() до того, как произойдет setEventBus, это не сработает.

Поэтому я бы использовал этот код для обновления карты:

 const onCardAddHandler = (card, laneId) => {
  eventBus.publish({
    type: 'UPDATE_CARD', //use this type instead of ADD_CARD
    laneId:laneId,
    card: {
      id: card.id,
      title: card.title,
      label: "1 sec",
      description: card.description
    }
  });
}
 

Затем на вашей плате замените свой onCardAdd следующим образом:

 <Board
  id="board1"
  components={components}
  style={{ background: '#F1F2F4' }}
  data={boardData}
  draggable
  handleLaneDragStart={handleLaneDragStart}
  handleLaneDragEnd={handleLaneDragEnd}
  canAddLanes
  onLaneAdd={onLaneAdd}
  onLaneDelete={onLaneDelete}
  handleDragEnd={handleDragEnd}
  onCardDelete={onCardDelete}
  onCardAdd={onCardAddHandler}. //here I collect de card information
  editable
  eventBusHandle={setEventBus}
/>