Erstellen Sie eine bearbeitbare Tabelle in React

MD Aminul Islam 15 Februar 2024

React React Table

Erstellen Sie eine bearbeitbare Tabelle in React

Die Tabelle ist der wichtigste Teil für jede Anwendung, um Daten zu visualisieren. In React gibt es eine Tabelle mit dem Namen Bearbeitbare Tabelle, über die Sie dynamisch bearbeiten können, die hauptsächlich verwendet wird, um die Bearbeitung von Daten durch Benutzer zu ermöglichen.

In diesem kurzen Artikel werden wir sehen, wie wir in React eine bearbeitbare Tabelle mit Erläuterungen erstellen können.

Erstellen Sie eine bearbeitbare Tabelle in React

Unser Beispiel unten zeigt, wie wir mit React eine bearbeitbare Tabelle erstellen können. Befolgen Sie die folgenden Beispielcodes.

Code - App.js:

import React from 'react';

export default class DynamicTable extends React.Component {
  // Class constructor
  constructor(props) {
    super(props);

    this.state = { Name: '', Data: [] }
  }

  // An action event on updated data
  UpdateData(event) {
    this.setState({Name: event.target.value});
  }

  // A click action
  ClickAction() {
    var Data = this.state.Data;
    Data.push(this.state.Name);
    this.setState({Data: Data, Name: ''});
  }

  // An action event on data change
  OnDataChange(i, event) {
    var Data = this.state.Data;
    Data[i] = event.target.value;

    this.setState({Data: Data});
  }

  // An action event on data  delete
  OnDataDelete(i) {
    var Data = this.state.Data;

    Data.splice(i, 1);

    this.setState({Data: Data});
  }

  // Organizing the table
  DrawTable() {
    var context = this;

    return  this.state.Data.map(function(o, i) {
              return (
                <tr key={'item-' + i}>
                  <td>
                    <input type='text' value={o} onChange={
        context.OnDataChange.bind(context, i)}/>
                  </td>
                  <td>
                    <button onClick={context.OnDataDelete.bind(context, i)}>Delete</button>
                  </td>
                </tr>
              );
            });
  }

// Rendering the UI
    render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>{this.DrawTable()}</tbody>
        </table>
        <hr/>
        <input type='text' value={this.state.Name} onChange={this.UpdateData.bind(this)}/>
        <button onClick={this.ClickAction.bind(this)}>Add Item </button>
      </div>
    );
  }
}

Wir haben bereits den Zweck jedes Codeblocks befohlen. Schauen wir uns nun die Datei index.js an, die wie folgt aussieht.

Code - index.js:

// importing necessary packages and files
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';

import reportWebVitals from './reportWebVitals';
import DynamicTable from './table.js';

// Specifying the parent element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DynamicTable />
  </React.StrictMode>
);

reportWebVitals();

Nachdem Sie alle Dateien fertiggestellt haben, erhalten Sie die folgende Ausgabe in Ihrem Browser.

Ausgang:

Reaktionstabelle bearbeiten

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Ihr System muss die neueste Node JS-Version enthalten, um ein React-Projekt auszuführen.

Autor: MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

Erstellen Sie eine bearbeitbare Tabelle in React

Verwandter Artikel - React Table