Javascript-forum
Daten aus einem gerenderten JSX.Element übertragen - Druckversion

+- Javascript-forum (http://javascript-forum.de)
+-- Forum: Javascript allgemeiner (http://javascript-forum.de/Forum-javascript-allgemeiner--16)
+--- Forum: React (http://javascript-forum.de/Forum-thema-react--19)
+--- Thema: Daten aus einem gerenderten JSX.Element übertragen (/Thread-thema-daten-aus-einem-gerenderten-jsx-element-%C3%BCbertragen--10)



Daten aus einem gerenderten JSX.Element übertragen - MaxlProg - 20.04.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:
  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");

  }


  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"
              />

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

Vielen Dank schonmal an alle für die Hilfe!

EDIT: Bin selbst auf die Lösung gekommen, manchmal denkt man einfach zu kompliziert ... ich werd es hier auch abändern für alle die eventuell mal das selbe Problem haben!


RE: Daten aus einem gerenderten JSX.Element übertragen - admin - 24.04.2021

Gut das du es geschafft hast.
Ich hätte auch erst mal kucken müssen und testen.