如何在此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) 
} 

更新后的项目将然后通过处理您的应用程序组件来取代旧的。