Daten aus einem gerenderten JSX.Element übertragen

[MaxlProg]

Hallo zusammen,
ich mach jetzt hier mal den Anfang, ich hoffe ich bin im richtigen Unterforum...
Und zwar bin ich gerade dabei ein SPFx WebPart zur darstellung einer SharepointOnline-Kontaktliste zu erstellen. (mit CRUD-Operations)
Mein Problem liegt aktuell darin, dass ich in meiner _onRenderItemColumn-Methode einen Button in mein WebPart für jeden Kontakt einfüge und hierrüber die CRUD-Operation zum löschen dieses Kontakts aufrufen möchte.
-> Wie bekomme ich die item.ID in meine deleteData-Methode aus dem onClick-Event?
[CODE lang="jsx" highlight="11, 23"] public _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {


const fieldContent = item[column.fieldName as keyof IContact] as string;



switch (column.key) {

case 'Delete':
return <Link onClick={() => this.deleteData()}>X</Link>;


default:
return <span>{fieldContent}</span>;
}
}


public async deleteData()
{

await sp.web.lists.getByTitle("ContactList").items.getById(/* */).delete();

alert("Contact deleted Successfully");

}


public render(): React.ReactElement<IContactListFinalPnPProps> {

return (
<div className={ styles.contactListFinalPnP }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<DetailsList
items={this.state.contacts}
setKey="set"
columns={this.state.columns}
onRenderItemColumn={this._onRenderItemColumn}
onColumnHeaderClick={this._onColumnClick}
onItemInvoked={this._onItemInvoked}
onColumnHeaderContextMenu={this._onColumnHeaderContextMenu}
//onActiveItemChanged="set"
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
/>[/CODE]

Ich hoffe das ist soweit verständlich... Ich bin noch, naja, relativer Neuling und programmiere insgesamt erst seit September 2020. 🙄

Vielen Dank schonmal an alle für die Hilfe!

 

[mrBrown]

In Zeile 11 kannst du der Funktion das übergeben, was du brauchst. Das was du in Zeile 23 versuchst, das raussuchen aus dem gerendertem HTML(?) ist eher unüblich

 

[MaxlProg]

In Zeile 11 kannst du der Funktion das übergeben, was du brauchst. Das was du in Zeile 23 versuchst, das raussuchen aus dem gerendertem HTML(?) ist eher unüblich

Ja ich habs raus ... danke! Manchmal denkt man einfach viel zu kompliziert ...
Ich werds hier noch abändern für alle die eventuell das gleiche Problem haben

[CODE lang="jsx" title="Lösung" highlight="11, 20, 23"]public _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {


const fieldContent = item[column.fieldName as keyof IContact] as string;



switch (column.key) {

case 'Delete':
return <Link onClick={() => this.deleteData(item)}>X</Link>;


default:
return <span>{fieldContent}</span>;
}
}


public async deleteData(item: any)
{

await sp.web.lists.getByTitle("ContactList").items.getById(item.ID).delete();

alert("Contact deleted Successfully");

}[/CODE]