問題タブ [react-data-grid]

react-data-gridコンポーネントを使用しています。編集およびその他の多くのオプションを備えたグリッド構造を提供します。各セルをクリックすると、セルの内容を編集できます。私のプロジェクトでは、日付列がフォーカスされているときに、ユーザーが日付を選択できる UI をバインドしたいという状況があります。そのために、react-datepickerを使用しました成分。日付列オプションで、react-datepicker コンポーネントをフォーマッターとして指定できます。反応するdatepickerコンポーネントで日付を変更できますが、それはセルの値を更新していません（コンソールのデータボタンをクリックすると、変更が更新されたかどうかを確認できます）。 react-datepicker コンポーネントで別の日付が選択されたときに、セルの値を更新できます。他のセルで値が変更されると、自動的に発生します。

React Data Grid ( https://github.com/adazzle/react-data-grid )を使用するグリッドを使用していますが、セルを選択すると境界線が次のセルのテキストを覆うため、問題が発生しています。「探索的プログラミング」ルートをたどりましたが、テキストを揃えるためのコードをどこに追加すればよいかわかりません。

明らかなことを見逃したことがありますか、それとも Reaction フレームワークに干渉するものがありますか?

私はreact-data-grid、編集可能なデータの束を表示するために使用しているかなり大きな React JS プロジェクトに飛び込んでいます。現在、サーバーに変更を送信するには、[更新] ボタンをクリックする必要があります。私の仕事は、次のような自動保存機能を作成することです。

1. ユーザーがセルを選択してテキストを編集
2. ユーザーがテキストを変更
3. ユーザーは別のセルに移動するか、データグリッドから離れてクリックします
4. 変更はサーバーに永続化されます

これが私が試したことです：

1. onBlur各列のイベント。イベントは発生しますが、イベントはdiv基になるinputコントロールではなくに関連付けられているようです。したがって、このイベントが発生した時点ではセルの値にアクセスできません。
2. onCellDeselected<ReactDataGrid>コンポーネント自体に。このメソッドはレンダリング時にすぐに起動され、その後別のセルに移動するときにのみ起動されるようです。最後のセルを編集していて、クリックしてデータ グリッドから離れた場合、このコールバックは発生しません。

を使用しreact-data-gridて、ユーザーが編集を終了したときに編集可能なセルのコンテンツに効果的にアクセスするにはどうすればよいですか?

最近 React の学習を始めました。コンポーネントにデータ グリッドがあり、行をクリックするとイベントがトリガーされます。イベント ハンドラーでは、行の小道具 (クリックされた行の各列からの値) を取得できます。だから私が達成したかったのは、グリッド内の行のonClickを有効にするフォームコンポーネントに3つのボタンがあることです。グリッドで選択された行に対してさまざまなアクションを実行する各ボタンの onClick で新しいページに移動したいと考えています。私が直面している問題は、これらのボタンを使用してさまざまな操作を実行するために行の値が必要なため、3 つのボタンすべてのハンドラーに行の小道具を渡すにはどうすればよいかということです。

3 つのイベント ハンドラーすべてで row.ID が必要です。コンポーネント全体でこれを使用できるように、これを状態に格納する方法はありますか?

更新：以下はこれを達成するためのコードです

Reactの非常に基本的な