Question

我正在构建一个React应用程序来学习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>
    );
  }
});

主App组件中的removeCashflow看起来像：

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

有没有人有任何指示或建议在React中设置编辑条目的最佳方法？

不确定从哪里开始。

谢谢：）

Answer 1

第一步是为您的条目创建一个单独的组件，比如Entry; - ）

您可以使用其道具和要更改的方法调用您的条目组件，如下所示：

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

然后，应用程序组件将处理更新的项目以替换旧项目。

如何在此React应用程序中设置编辑项功能？

1 个答案: