ReactJS를 사용하여 레코드의 세부 정보 표시

Question

버튼/클릭 레코드에서 동적으로 행/레코드를 추가 및 삭제할 수있는 레코드 테이블이 있습니다. 이제 해당 레코드를 만들 때 각 레코드의 기본 세부 정보 (designation = "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') 
);