# Daten aus einem gerenderten JSX.Element übertragen



## MaxlProg (20. Apr 2021)

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 (20. Apr 2021)

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 (20. Apr 2021)

mrBrown hat gesagt.:


> 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]


----------

