Ich habe eine Tabelle von Datensätzen, in denen ich Zeilen/Datensätze dynamisch hinzufügen und löschen kann (auf Knopfdruck). Jetzt möchte ich Standarddetails (sagen wir Bezeichnung = "Engineer" und Gehalt = "$ 100") jedes Datensatzes speichern, wenn dieser Datensatz erstellt wird, und diese Details eines Datensatzes sollten beim Klicken auf diesen Datensatz sichtbar sein. Bitte erzähle, wie ich das in ReactJS machen kann.zeigt Details eines Datensatzes mit ReactJS
Code:
var RecordsComponent = React.createClass({
getInitialState: function() {
return {
rows: ['Record 1', 'Record 2', 'Record 3'],
newValue: "new value"
}
},
render : function() {
return (
<div className="container" style={{"width" : "50%", "alignment" : "center"}}>
<table className="table table-striped">
<thead>
<tr>
<th colSpan={2}>Records</th>
</tr>
</thead>
<tbody>
{this.state.rows.map((r) => (
<tr>
<td onClick={this.showDetails}>{r}</td>
<td>
<button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
<input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
<button id="addBtn" onClick={this.addRow}>ADD</button>
</div>
);
},
updateNewValue: function(component) {
this.setState({
newValue: component.target.value
});
},
addRow : function() {
var rows = this.state.rows
rows.push(this.state.newValue)
this.setState({rows: rows})
},
deleteRow : function(record) {
this.setState({
rows: this.state.rows.filter(r => r !== record)
});
},
showDetails : function(record) {
//details of the clicked record should become visible.
}
});
React.render(<RecordsComponent/>, document.getElementById('display'))