添加或编辑时单个可编辑表行

Question

我的react应用程序中有一个react-table，用于呈现交易行。我的逻辑是在按钮单击时添加一个新的空行。我希望这一行（并且只有这一行）是可编辑的，以便可以使用它来创建新交易。我尝试使用Cell列属性和cellInfo中的行索引来完成此操作。这样可以使我正在测试的单个列仅可编辑，但该列中的其余单元格为空白。

import React from 'react';
import axios from 'axios';

import ReactTable from "react-table";
import "react-table/react-table.css";

const API = 'http://127.0.0.1:8000/api/transactions/';

class Transactions extends React.Component {

  constructor() {
    super();

    this.state = {
      data: [],
      isLoading: true,
      error: null
    };
    this.fetchData = this.fetchData.bind(this);
    this.handleAddTransaction = this.handleAddTransaction.bind(this);
    this.renderEditable = this.renderEditable.bind(this);
  }

  handleAddTransaction() {
    let newEmptyRow = {
      date: "",
      payee: "",
      category: "",
      amount: ""
    }

    const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
    console.log(newEmptyRow);
    this.setState(currentState => ({ data: insert(currentState.data, 0, newEmptyRow) }));
  }

  fetchData(state, instance) {
    this.setState({
      isLoading: true
    });

    axios.get(API).then(response => {
      this.setState({
        data: response.data.results,
        isLoading: false
      });
    });
  }

  renderEditable(cellInfo) {
    if(cellInfo.row._index === 0) {
      return (
        <div
          style={{ backgroundColor: "#009999" }}
          contentEditable
          suppressContentEditableWarning
          onBlur={e => {
            const data = [...this.state.data];
            data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
            this.setState({ data });
          }}
          dangerouslySetInnerHTML={{
            __html: this.state.data[cellInfo.index][cellInfo.column.id]
          }}
        />
      );
    }
  }

  render() {
    const {
      data,
      isLoading
    } = this.state;

    return (
      <div>
        <button onClick={this.handleAddTransaction} type="button">New +</button>
        <div>
          <ReactTable
            columns = {[
            {
              Header: 'Date',
              accessor: 'date',
              width: 200,
              Cell: this.renderEditable
            },
            {
              Header: 'Payee',
              accessor: 'payee',
              width: 400
            },
            {
              Header: 'Category',
              accessor: 'category',
              width: 200
            },
            {
              Header: 'Amount',
              accessor: 'amount',
              width: 200
            },
            {
              Header: 'Balance',
              accessor: 'balance',
              width: 200
            }]}
            data = {data}
            onFetchData={this.fetchData} // Request new data when things change
            defaultPageSize = {500}
            sortable = {false}
            manual
            style={{
              // This will force the table body to overflow and scroll
              // TODO Finalize height
              height: "800px"
            }}
            loading={isLoading}
            className="-striped -highlight"
          />
        </div>
      </div>)
  };
}

export default Transactions;