2017-09-19 4 views
0

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')) 

Antwort

2

Sie sollten für das Rendern Dinge eine eigene Funktion haben, die nach der Überprüfung eine Bedingung wie die Bezeichnung und Gehalt in diesem Fall gemacht werden muss.

Ich hoffe, dass dies Ihre Frage beheben wird.

Code:

var RecordsComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      rows: [{name:'Record 1',designation:"Engineer",salary:"$100"}, {name:'Record 2',designation:"Engineer",salary:"$100"},{name:'Record 3',designation:"Engineer",salary:"$100"}], 
      newValue: "new value", 
      expandedRecords : [] 
     } 
    }, 
    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.name}</td> 
          <td> 
           <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button> 
          </td> 
          {this.renderDesignation(r.name)} 
          {this.renderSalary(r.name)} 
         </tr> 
        ))} 
        </tbody> 
       </table> 
       <input type="text" id={"newVal"} onChange={this.updateNewValue}></input> 
       <button id="addBtn" onClick={this.addRow}>ADD</button> 
      </div> 
     ); 
    }, 
    updateNewValue: function(component) { 
     this.setState({ 
      newValue: {name:component.target.value} 
     }); 
    }, 
    addRow : function() { 
     var rows = this.state.rows 
     var newValue = this.state.newValue 
     newValue["designation"] = "engineer"; 
     newValue["salary"] = "$100"; 
     rows.push(newValue) 
     this.setState({rows: rows}) 
    }, 
    deleteRow : function(record) { 
     this.setState({ 
      rows: this.state.rows.filter(r => r.name !== record) 
     }); 
    }, 
    showDetails : function(record) { 
     //details of the clicked record should become visible. 
     let expandedRecords = this.state.expandedRecords; 
     expandedRecords.push(record.target.innerHTML); 
     this.setState({...this.state, expandedRecords: expandedRecords }); 
    }, 
    renderDesignation : function(name){ 
      if(this.state.expandedRecords.includes(name)) 
     { 
     var row = this.state.rows.filter(r=> r.name === name)[0] 
     return(<td>{"designation: "+row.designation}</td>); 
     } 
     return; 
    }, 
    renderSalary : function(name){ 
      if(this.state.expandedRecords.includes(name)) 
     { 
     var row = this.state.rows.filter(r=> r.name === name)[0] 
     return(<td>designation: {row.salary}</td>); 
     } 
     return; 
    } 
}); 
ReactDOM.render(
    <RecordsComponent />, 
    document.getElementById('container') 
); 
Verwandte Themen