3

アプリケーション内で使用するために、react-dnd ソート可能な例を採用しました。

ドラッグに追従する「不透明度」を作成できません。

最初に要素を選択すると、不透明度が適用されます。

開始ドラッグ

しかし、位置を変更するために上に移動すると、元のDOM要素(?)に不透明度が適用されたままになります。

ドラッグしながら要素上を移動

それに応じて状態が変更され、この状態に関連付けられたテーブル内の列が並べ替えられます。したがって、不透明度を除けば、他のすべては正常に機能しています。

要素を移動すると、li の値のみが変更されますが、data-reactid位置は変更されません。

ここに画像の説明を入力

私のアプリの唯一の違いは、状態を管理する方法です。私のアプリケーションでは、状態は redux で管理されています。

hoverDropTarget に渡される関数は、基本的に例からのコピー アンド ペーストです。

SortableColumnEntry コンポーネント:

class SortableColumnEntry extends Component {
  render(){
    const { connectDragSource, connectDropTarget } = this.props
    const { column, isDragging, index } = this.props

    const opacity = isDragging ? 0 : 1

    const element = connectDropTarget(connectDragSource(
      <li
        style={{opacity: opacity}}</li>
    ))

    return element
  }
}

export default flow(
  DragSource(DragTypes.COLUMN, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })),
  DropTarget(DragTypes.COLUMN, target, (connect) => ({
    connectDropTarget: connect.dropTarget()
  }))
)(SortableColumnEntry)
4

1 に答える 1

8

わかりました、ようやく並べ替えました。

key親コンポーネントから渡した値に問題がありました。

以前keyは、要素によって変化するインデックスに基づいていました。

それが私がそれをやっていた方法です：

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
    key={index} 
    index={index}
    column={column} />)

一意であり、状態に関連付けられるように変更したとき:

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
      key={column} 
      index={index}
      column={column} />)

それはすべて機能し始めました。

現時点では、column値は一意であり、単一のエントリに関連付けられています。後でid、状態にフィールドを追加するとよいでしょう。

于 2015-11-15T22:40:28.673 に答える