2017-05-19 32 views
2

ソート可能で編集可能なAnt.Designテーブルを作成しようとしています。 Ant.Designのドキュメントには、両方のサンプルコード(herehere)が表示されます。私は最小限のコードリポジトリでこれらを組み合わせようとしました:https://github.com/Silox/Ant-Design--EditableSortableTableソート可能で編集可能なAntデザインテーブル

主な問題は、値を編集中にテーブルが並べ替えられ、これを防ぐ方法が見つからないことです。私が探している振る舞いは、ユーザーがセルを編集したときに、その注文が「保留中」に置かれ、ユーザーが編集を完了すると、そのテーブルが再利用されるということです。誰もこれを達成するための任意のアイデアを持っていますか?これについて

答えて

3

方法:

  • EditableSortableTableにブール状態editingを追加します。
  • setEditable/setNotEditableisEditableMap.length > 0に設定します。 EditableSortableTableアドオンのため

shouldComponentUpdate(nextProps, nextState) { return !(nextState.editing && this.state.editing) }

[更新]あなたは、テーブルオブジェクトに新しい_sortTitle小道具を紹介して行をソートすることができますshouldComponentUpdate()ない使用に要件を考えますこの小道具に基づいてこの小道具はレンダリングされませんが、取り付け時にtitleに設定され、タイトルセルの編集が完了した後にのみ更新されます。

+0

こんにちは@ jesper-we、ご意見ありがとうございます。このアプローチは、編集アクションがこのコンポーネントの唯一のアクションであれば好きですが、私のより幅広い使用例では、コンポーネントは1行の編集と並行して行うことができます(たとえば、複数の行の編集や、コンポーネントのデータがすぐに更新されます)。このようにshouldComponentUpdateを上書きすると、特にアクションごとに例外を追加しない限り、それらのすべてのアクションが防止されます。 – Silox

+0

私は、 'edit'ブール値に基づいて解決するかどうかを決めるカスタムトリガーソート関数を近づけるべきでしょう。 – Silox

+0

私は実際に元々書いた2番目のアプローチで答えを更新しましたが、shouldComponentUpdateアプローチよりもあまり優雅ではなかったので削除しました:-) –

関連する問題