HTML Button in Table die Reihe auswählen?

Moin,

ich habe eine Table in React JSX. Und möchte dort mit einem Button im Table die Reihe auswählen. Nicht mit reihe anklicken oder checkbox, sondern einem Button.

Hab schon selber einiges versucht aber bin eindeutig zu doof.

Wenn mir da einer Helfen kann, wäre das Super!.

Wiegesagt es ist nicht pures HTML sondern React JSX.

Comments

[regex9]

Wie kann man sich das vorstellen? In jeder Reihe ist ein Button und bei Klick wird die Reihe farblich hervorgehoben? Oder geht es um eine bestimmte Aktion (Zeile löschen o.ä.)?

[Million322]

Ja ein lösch Button. Das geht auch allerdings in react keine Ahnung. In normalen js und HTML hab ich das hinbekomme

Answer 1

[regex9]

Du wirst eine Funktion haben, die dir deine Tabellenreihen ausgibt. Zum Beispiel:

renderTableRows(data) {
  return someData.map((person, index) => {
    return (
      <tr>
        <td>{person.name}</td>
        <td>{person.age}</td>
        <td><button data-id={person.id} onClick={this.removeEntry}>Remove</button></td>
      </tr>
    );
  });
}

In der gibst du einfach nur deinen Button mit aus und fügst ein onClick-Attribut auf ihm hinzu. Dazu brauchst du noch die Funktion, die dort gebunden wird:

removeEntry = () => {
  const personId = e.target.getAttribute("data-id");
  /* do something ... */
}

In dieser könntest du vom Button (dieser ist das angeklickte Element: target) den Wert des data-Attributs einholen. Ob du da nun eine ID hineingibst oder irgendeinen anderen Wert, ist dir überlassen. Hauptsache es ist ein Wert, an dem du die Datenzeile in deiner Datenliste (im obigen Snippet someData) eindeutig identifizieren kannst. Dann kannst du in ihr nämlich nach den Eintrag suchen und ihn herauslöschen.