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

Question

I have a React application I am building to learn React which adds Income, Expenditure and logs Transactions.

I am struggling with how to go about setting up the ability to edit an entry.

So I have a series of entries for each. The Expenditure entries React class is as follows:

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

And removeCashflow, in the main App component, looks like:

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

Does anyone have any pointers or advise as to the best way to set up the ability to edit an entry in React?

Unsure of where to start.

Thank you :)

Answer 1

The first step would be to create a separate component for your entry, let's say Entry ;-)

You would call your entry component with its props, and methods to be changed, like this :

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

The render function of your entry component would be similar to the content of your renderExpenditure function. The button to remove would trigger a method called handleDelete this way:

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

And your component would also have a handleEdit method similar to this one:

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

The updated item would then be handled by your app component to replace the old one.