HOWTO · React
Erstellen Sie eine bearbeitbare Tabelle in React
In diesem Tutorial wird erläutert, wie Sie eine bearbeitbare Tabelle in React erstellen.
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:
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.
