AOR: Wie wird auf die Bearbeitungsseite weitergeleitet, wenn der Benutzer auf eine Datagrid-Zeile klickt?

Question

Hintergrund

ich die Admin on rest Datagrid Komponente bin mit einem REST-Endpunkt zu machen. Beispiel:

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

Der EditButton leitet den Benutzer zur entsprechenden Bearbeitungsseite weiter. Alles funktioniert super.

Frage

Aber jetzt versuche ich auf Zeile klicken auf dem Weg zu arbeiten, wie der Benutzer auf der Bearbeitungsseite statt, ohne dass die EditButton zu verwenden.

Meine Versuche

Meine erste Idee war es, die rowOption onCellClick zu verwenden.

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

wo die Handle-Funktion so aussieht.

Dies erfasst den Zeilenklick und die Ereignisdaten werden in der Konsole protokolliert. Aber soweit ich das sehe, enthalten die Click-Event-Daten keine Informationen über die REST-Ressourcen-ID der Zeile.

Hat jemand das row click-Ereignis verwendet, um etwas Ähnliches zu tun?

Oder wäre ein besserer Ansatz, eine neue Komponente (zum Beispiel ClickableField) zu erstellen, um die TextFields zu umbrechen und Click-Event-Handler in diese Wrapping-Komponente einzufügen? Beispiel:

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

Answer 1

Die Material UI-Tabelleneigenschaft hat eine onRowSelection-Eigenschaft. Sie können diese verwenden, um zu definieren und benutzerdefinierte Aktionen gesetzt, wenn Zeile

ausgewählt

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

Sie diese Eigenschaften Stütze des AOR Datenraster in der ‚Optionen‘ zugreifen kann.

Wenn dies fehlschlägt, sollte Ihre klickbare Feldidee funktionieren.

Answer 2

Wie von kunal pareek geantwortet, funktionierte die akzeptierte Antwort, die darauf hinweist, onRowSelection zu verwenden.

Anfangs verpasste ich die selectable Eigenschaft, die an die TableRow übergeben wurde. Aber als ich das hinzufügte, wurde das Auswahlereignis gehandhabt. So endete ich damit.

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