ReactJSを使用したレコードの詳細を表示

Question

私は行/レコードを動的に（ボタンをクリックして）追加したり削除したりすることができるレコードのテーブルを持っています。今、私は、そのレコードが作成されたときに、各レコードのデフォルトの詳細を格納したいとします（指定= "Engineer"とsalary = "$ 100"とします）。 ReactJSでどうすればいいのか教えてください。

コード：

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

Answer 1

あなたは、この場合の指定や給与などの条件を確認した後にレンダリングする必要のあるものをレンダリングするための独立した機能を持っている必要があります。

これはあなたの質問を修正することを願っています。

コード：

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