如何在此React應用程序中設置編輯項目功能？

Question

我有一個React應用程序，我正在學習React，它增加了收入，支出和日誌事務。

我很擔心如何設置編輯條目的能力。

所以我有一系列的每個條目。支出項陣營等級如下表所示：

const Expenditure = React.createClass({ 
    renderExpenditure(key) { 
    const details = this.props.cashbook[key]; 
    return(
     <tr className="item" key={key}> 
     <td><strong>{details.name}</strong></td> 
     <td><strong>{h.formatPrice(details.amount)}</strong></td> 
     <td>{details.category}</td> 
     <td>{details.type}</td> 
     <td>{details.date}</td> 
     <td><button className="remove-item" onClick={this.props.removeCashflow.bind(null, key, 'expenditure')}>Remove</button></td> 
     </tr> 
    ); 
    }, 
    render() { 
    return(
     <div className="expenditure"> 
     <table id="exp-table"> 
      <tbody> 
      {Object.keys(this.props.cashbook || {}).map(this.renderExpenditure)} 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
}); 

而且removeCashflow，在主應用程序組件，看起來像：

removeCashflow(key, type) { 
    this.state.cashbook[type][key] = null; 
    this.setState({ 
     cashbook: { [type]: this.state.cashbook[type] } 
    }); 
    }, 

沒有人有任何指針或建議，以建立最好的辦法在React中編輯條目的能力？

不確定從哪裏開始。

謝謝:)

Answer 1

的第一步是創建你進入一個單獨的組件，讓我們說進入;-)

你會打電話給你的入口部件，其道具和方法是如下所示：

<Entry entry={this.props.cashbook[key]} key={key} id={key} onRemove={this.props.removeCashflow} onEdit={this.props.editEntry} /> 

您的輸入組件的渲染功能與renderExpenditure函數的內容類似。刪除的按鈕會觸發一個名爲handleDelete這樣的方法：

handleDelete() { 
    this.props.onDelete(this.props.id, 'expenditure') 
} 

而且你的組件也有類似這樣的一個handleEdit方法：

handleEdit(someParams) { 
    var editEntry = this.props.entry 
    // perform the edit here 
    this.props.onEdit(this.props.id, editEntry) 
} 

更新後的項目將然後通過處理您的應用程序組件來取代舊的。