AOR：ユーザーがデータグリッドの行をクリックしたときにページを編集する方法は？

Question

背景

私は、RESTエンドポイントをレンダリングするためにAdmin on rest Datagridコンポーネントを使用しています。このように：

<Datagrid> 
    <TextField source="name" /> 
    <TextField source="email" /> 
    <EditButton />   
</Datagrid> 

EditButtonは、ユーザーを対応する編集ページにルーティングします。すべての作品は素晴らしいです。

質問

しかし、今、私はEditButtonを使用せず、代わりに行をクリックしたときに、編集ページへのルートユーザーをどのように動作するようにしようとしています。

私の最初のアイデア

私の試みはrowOption onCellClickを使用することでした。

<Datagrid rowOptions={ {onClick: rowClick } } > 
    <TextField source="name" /> 
    <TextField source="email" /> 
</Datagrid> 

ハンドル関数は次のようになります。

const rowClick = (proxy, event) => { 
    console.log(proxy, event); 
    // how to get the resource id?? 
} 

これは行のクリックをキャプチャし、イベントデータがコンソールに記録されます。しかし、私が見る限り、クリックイベントデータには行のRESTリソースIDに関する情報は含まれていません。

誰かが同様の操作を行うために行クリックイベントを使用しましたか？

また、このラッピングコンポーネントでTextFieldをラップしてクリックイベントハンドラを追加するための新しいコンポーネント（たとえばClickableField）を作成する方が良いでしょうか？同様に、

<Datagrid> 
    <ClickableField><TextField source="name" /></ClickableField> 
    <ClickableField><TextField source="email" /></ClickableField> 
</Datagrid> 

Answer 1

Material UIテーブルのプロパティには、onRowSelectionプロパティがあります。行が

http://www.material-ui.com/#/components/table

を選択している場合、あなたはAORのデータグリッドの「オプション」小道具でこれらのプロパティにアクセスすることができますカスタムアクションを定義し、設定するためにこれを使用することができます。

これが失敗した場合、クリック可能なフィールドの考え方が有効になります。

Answer 2

kunal pareekさんからの返信として、onRowSelectionを使用するように提案された回答が有効でした。

最初に、私はselectableプロパティがTableRowに渡されていませんでした。しかし、それを追加すると、選択イベントが処理されました。こうして私はこれで終わりました。

<Datagrid rowOptions={{ selectable: true }} options={{ onRowSelection: rowClick }}> 
    <TextField source="name" /> 
    <TextField source="email" /> 
</Datagrid>