ReactJSに入力された詳細の行の代わりに空レコード/行が追加されました

Question

レコードが表に示されているReactJSで簡単なコードを記述しました。各行の名前は表示されますが、レコード/行の指定と給与はその行をクリックすると表示されます。問題は、詳細（名前、指定、&給与）を入力して新しいレコードを追加すると、入力された詳細でレコードの代わりに空白のレコードが追加されることです。何が問題なのか教えてください。

コード：

var RecordsComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      records: [{name:'Kevin Petersen',designation:"Junior Software Engineer",salary:"$1000"}, {name:'Michel Johnson',designation:"Senior Software Engineer",salary:"$2500"},{name:'Shane Bond',designation:"HR Manager",salary:"$1250"}], 
      newRecord: [{name:'new name', designation:'new designation', salary:'new salary'}], 
      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.records.map((r) => (
         <tr> 
          <td onClick={this.showDetails}> 
           {r.name} 
           {this.renderDesignation(r.name)}<span></span> 
           {this.renderSalary(r.name)} 
          </td> 
          <td> 
           <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button> 
          </td> 
         </tr> 
        ))} 
        </tbody> 
       </table> 
       <input type="text" id={"newNameId"} placeholder={"name"} onChange={this.updateNewName}></input> 
       <input type="text" id={"newDesId"} placeholder={"designation"} onChange={this.updateNewDesignation}></input> 
       <input type="text" id={"newSalId"} placeholder={"salary"} onChange={this.updateNewSalary}></input> 
       <button id="addBtn" onClick={this.addRow}>ADD</button> 
      </div> 
     ); 
    }, 
    updateNewName: function(component) { 
     this.setState({ 
      newRecord: {name:component.target.value}, 
     }); 
    }, 
    updateNewDesignation: function(component) { 
     this.setState({ 
      newRecord: {designation:component.target.value}, 
     }); 
    }, 
    updateNewSalary: function(component) { 
     this.setState({ 
      newRecord: {salary:component.target.value} 
     }); 
    }, 
    addRow : function() { 
     var records = this.state.records; 
     var newRecord = this.state.newRecord; 
     records.push(newRecord) 
     this.setState({records: records}) 
    }, 
    deleteRow : function(record) { 
     this.setState({ 
      records: this.state.records.filter(r => r !== record) 
     }); 
    }, 
    showDetails : function(record) { 
     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.records.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.records.filter(r=> r.name === name)[0] 
      return(<td>Salary: {row.salary}</td>); 
     } 
     return; 
    } 
}); 
React.render(
    <RecordsComponent />, 
    document.getElementById('display') 
); 

Answer 1

実は、あなたがSETSTATEの儀式を使用していますか？このようなものを使用した場合、

this.setState({ 
      newRecord: {salary:component.target.value} 
     }); 

既存の状態のnewRecord属性は完全に置き換えられます。状態の属性newRecordは更新されません。したがって、この時点で、状態はそれはあなたが状態を更新するたびので、代わりにこのようにすることで、我々は状態を変異させる必要があり、この

this.state = {//other properties, 
       newRecord: {name: 'some name', salary: 'some salary', designation : 'some designation'} 

ようなことはありません。この

this.state = {//otherproperties, 
       newRecord: {salary:'some value'} 

のようになります。

また、タグ全体のinnerHTMLを使用していたので、名前だけでなく給与も指定されています。だから、名前をクリックすると、その指定と給与を表示しません。したがって、完全なコンポーネントはこのように見えるはずです。

var RecordsComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      records: [{name:'Kevin Petersen',designation:"Junior Software Engineer",salary:"$1000"}, {name:'Michel Johnson',designation:"Senior Software Engineer",salary:"$2500"},{name:'Shane Bond',designation:"HR Manager",salary:"$1250"}], 
      newRecord: [{name:'new name', designation:'new designation', salary:'new salary'}], 
      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.records.map((r) => (
         <tr> 
          <td onClick={this.showDetails}> 
           {r.name} 
          </td> 
          {this.renderDesignation(r.name)} 
          {this.renderSalary(r.name)} 
          <td> 
           <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button> 
          </td> 
         </tr> 
        ))} 
        </tbody> 
       </table> 
       <input type="text" id={"newNameId"} placeholder={"name"} onChange={this.updateNewName}></input> 
       <input type="text" id={"newDesId"} placeholder={"designation"} onChange={this.updateNewDesignation}></input> 
       <input type="text" id={"newSalId"} placeholder={"salary"} onChange={this.updateNewSalary}></input> 
       <button id="addBtn" onClick={this.addRow}>ADD</button> 
      </div> 
     ); 
    }, 
    updateNewName: function(component) { 
     this.setState({...this.state, 
      newRecord: {...this.state.newRecord,name:component.target.value}, 
     }); 
    }, 
    updateNewDesignation: function(component) { 
     this.setState({...this.state, 
      newRecord: {...this.state.newRecord,designation:component.target.value}, 
     }); 
    }, 
    updateNewSalary: function(component) { 
     this.setState({...this.state, 
      newRecord: {...this.state.newRecord,salary:component.target.value} 
     }); 
    }, 
    addRow : function() { 
     var records = this.state.records; 
     var newRecord = this.state.newRecord; 
     records.push(newRecord) 
     this.setState({records: records}) 
    }, 
    deleteRow : function(record) { 
     this.setState({ 
      records: this.state.records.filter(r => r !== record) 
     }); 
    }, 
    showDetails : function(record) { 
     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.records.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.records.filter(r=> r.name === name)[0] 
      return(<td>Salary: {row.salary}</td>); 
     } 
     return; 
    } 
});