react-sortable-hoc在第一次使用edgeOffset移动后停止

时间:2018-08-10 08:40:15

标签: reactjs

我正在尝试使用react-sortable-hoc创建一个可排序的表。这对于第一步是可行的,但之后,react-sortable-hoc将停止工作。表格中的行不再具有动画效果,尝试移动项目会引发以下错误:

TypeError: edgeOffset is undefined

这是相关代码:

const DragHandle = SortableHandle(() => <DragIndicatorIcon />);

const SortableItem = SortableElement(({ value, sortIndex, groupType }) => {
  return (
    <TableRow
      hover
      key={value.id}
      index={sortIndex}
    >
      <TableCell><DragHandle /></TableCell>
      <TableCell component="th" scope="row">
        {value.fullname}
      </TableCell>
      <TableCell numeric>{value.number}</TableCell>
      {groupType &&
        <TableCell>10</TableCell>
      }
    </TableRow>
  );
});

const SortableList = SortableContainer(({ items, groupType }) => {
  return (
    <TableBody>
      {items.map((user, index) => {
        return (
          <SortableItem key={`item-${index}`} groupType={groupType} index={index} sortIndex={index} value={user} />
        );
      })}
    </TableBody>
  );
});

并且:

<Table className={classes.table}>
  <TableHead>
    <TableRow>
      <TableCell />
      <TableCell>Name</TableCell>
      <TableCell numeric>Number</TableCell>
      {this.props.groupType === "1" &&
        <TableCell>Seconds</TableCell>
      }
    </TableRow>
  </TableHead>
  <SortableList items={this.props.items} groupType={this.props.groupType === "1"} onSortEnd={this.props.onSortEnd} useDragHandle={true} useWindowAsScrollContainer={true} />
</Table>

0 个答案:

没有答案