Question

我有一个带有任务板的以下React应用。在任务板上，有诸如卡片，列和主任务板之类的任务项目。所有任务项目都安排在任务列表中。任务项是使用react-beautiful-dnd库生成的。问题是，我需要在拖放任务项后获取任务项的列名。然后我需要根据列更改一些样式。如果在任务项中使用onClick，即使拖放后也需要单击任务项。如果我使用onDragEnd，则没有结果。如果使用onMouseDown，则任务项目无法拖动（就像它们是固定的一样）。拖放项目后，我需要获取新的列名。

这是代码结构：

任务项：

class TaskItem extends React.Component {

  render() {
    const { task, provided, classes, sendCardId } = this.props;
    return (
      <div
        className={`${classNames(classes.task, task.color ? classes[task.color] : '')} taskItem`}
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        onClick={() => sendCardId(task.projectID)}
      >
        <div>
          <Typography className="projectID primary-color-blue" variant="caption">{task.projectID}</Typography>
        </div>
        <div className="primary-margin">
          <Typography className="projectName primary-color-blue" variant="title" gutterBottom>{task.projectName}</Typography>
        </div>
      </div>
    )
  }
}

任务列表：

class InnerTaskList extends React.Component {

  cardID = (projectID) => {
    this.props.getCardId(projectID);
  }

  render() {
    const {sendPhase, sendId} = this.props;

    return this.props.tasks.map((task, index) => (
      <Draggable key={`${index}-${task.projectID}`} draggableId={`${index}-${task.projectID}`} index={index}>
        {(
          dragProvided,
          dragSnapshot,
        ) => (
          <TaskItem
            key={task.id}
            sendCardId={this.cardID}
            sendPhase={sendPhase}
            sendId={sendId}
          />
        )}
      </Draggable>
    ));
  }
}

class InnerList extends React.Component {

  cardID = (projectID) => {
    this.props.getCardId(projectID);
  }

  render() {
    const { tasks, dropProvided, sendPhase, sendId } = this.props;

    return (
      <div ref={dropProvided.innerRef}>
        <InnerTaskList getCardId={this.cardID} sendPhase={sendPhase} sendId={sendId} tasks={tasks} />
        {dropProvided.placeholder}
      </div>
    );
  }
}

class TaskList extends React.Component {

  cardID = (projectID) => {
    this.props.getCardId(projectID);
  }

  render() {
    const {
      ignoreContainerClipping,
      isDropDisabled,
      sendPhase,
      sendId
    } = this.props;

    return (
      <Droppable
        droppableId={listId}
      >
        {(
          dropProvided,
          dropSnapshot,
        ) => (
          <InnerList
            dropProvided={dropProvided}
            getCardId={this.cardID}
            sendPhase={sendPhase}
            sendId={sendId}
          />
        )}
      </Droppable>
    );
  }
}

列：

class Column extends React.Component {

  cardID = (projectID) => {
    this.props.getCardId(projectID);
  }

  render() {
    const { title, tasks, index, classes, sendPhase, sendId } = this.props;

    return (
      <Draggable draggableId={title} index={index} >
        {(provided, snapshot) => (
          <div className={`${classes.wrapper} columnWrapper`} key={index}>
            <div className={`${classes.list} columnList`}>
              <Typography className={`${classes.header} columnHeader`}>{title}</Typography>
              <div ref={provided.innerRef} {...provided.draggableProps} className={`${classes.cards} columnCards`}>
                <TaskList listId={title} tasks={tasks} getCardId={this.cardID} sendPhase={sendPhase} sendId={sendId} />
              </div>
            </div>
          </div>
        )}
      </Draggable>
    )
  }
}

任务栏：

class Taskboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: mockTaskboard,
      ordered: Object.keys(mockTaskboard),
      status: 'null',
      currentPhase: '',
      currentId: ''
    };
  }

  onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }
    const source = result.source;
    const destination = result.destination;
    if (
      source.droppableId === destination.droppableId &&
      source.index === destination.index
    ) {
      return;
    }
    if (result.type === 'COLUMN') {
      const ordered = reorder(
        this.state.ordered,
        source.index,
        destination.index,
      );
      this.setState({
        ordered,
      });
      return;
    }
    const data = reorderQuoteMap({
      quoteMap: this.state.columns,
      source,
      destination,
    });
    this.setState({
      columns: data.quoteMap,
    });
  };

  phaseCheck = (projectId) => {
    var phases = this.state.columns
    Object.keys(phases).forEach(phase => {
      Object.keys(phases[phase]).forEach(card => {
        if (phases[phase][card].projectID === projectId){
          this.setState({ currentPhase: phase, currentId: projectId })
        }
      });
    });
  }

  render() {
    const { statuses, columns, ordered } = this.state;
    const { classes } = this.props;

    return (
      <div className="taskboardMain">
        <div className="taskboardHeader">
          <span className="mainTaskDivTitle">My Workspace</span>
        </div>
        <DragDropContext
          onDragStart={this.onDragStart}
          onDragEnd={this.onDragEnd}
        >
          <Droppable
            droppableId="taskboard"
            type="COLUMN"
          >
            {(provided) => (
              <div ref={provided.innerRef} {...provided.droppableProps} className={classes.taskboard}>
                {ordered.map((key, index) => (
                  <Column
                    key={key}
                    index={index}
                    title={key}
                    tasks={columns[key]}
                    getCardId={this.phaseCheck}
                    sendPhase={this.state.currentPhase}
                    sendId={this.state.currentId}
                  />
                ))}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    );
  }
}

如何在React中触发onDragEnd变量？

0 个答案: