用react編寫一個可以編輯的表格

這只一個雛形，但是可以用了。難點是如何點擊每行后面的編輯按鈕，讓當前行的格子都變成input。

import {Component} from 'react'

const Action = props => {
  console.log(props)
  return (
    <div>
      <button type='button' onClick={props.editCb}>{props.tr.edit
          ? '保存'
          : '編輯'}</button>
      <button type='button' onClick={props.tr.edit? props.saveCb: Number}>取消</button>
    </div>
  );
};
class Table extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      headers: {
        name: "名稱",
        path: "路徑映射",
        action: ""
      },
      trs: [
        {
          name: "定時任務",
          path: "/xxxx",
          action: "",
          edit: false
        }, {
          name: "定時任務2",
          path: "/yyyy",
          action: "",
          edit: false
        }
      ]
    };
  }
  onSave(data) {
    //點擊取消按鈕時還原該行為顯示狀態
    data.edit = false
    if (data._initName !== undefined) {
      data.name = data._initName
      data.path = data._initPath
      //  data._initName = data._initPath = undefined
      this.forceUpdate()
    }
  }
  onEdit(data) {
    //點擊取消按鈕時還原該行為編輯狀態，再點擊還原
    var editable = data.edit = !data.edit
    if (editable) {
      data._name = data.name
      data._initName = data.name
      data.name = <input
        defaultValue={data._name}
        onInput={(e) => {
        data._name = e.target.value;
      }}/>
      data._path = data.path
      data._initPath = data.path
      data.path = <input
        defaultValue={data._path}
        onInput={(e) => {
        data._path = e.target.value;
      }}/>
      this.forceUpdate()
    } else {
      data.name = data._name
      data.path = data._path
      this.forceUpdate()
    }

  }
  render() {
    var headers = this.state.headers || {};
    var keys = Object.keys(headers);
    console.log(headers);
    return (
      <table>
        <thead>
          <tr>
            {keys.map(key => <th>
              {headers[key]}
            </th>)}
          </tr>
        </thead>
        <tbody>
          {this
            .state
            .trs
            .map(function (tr) {
              return (
                <tr>
                  {keys
                    .map(function (key, index) {
                      return (
                        <td key={key}>
                          {key === "action"
                            ? <Action
                                tr={tr}
                                saveCb={this
                                .onSave
                                .bind(this, tr)}
                                editCb={this
                                .onEdit
                                .bind(this, tr)}/>
                            : tr[key]
}
                        </td>
                      )
                    }, this)}
                </tr>
              )
            }, this)}
        </tbody>
      </table>
    )
  }
}

ReactDOM.render(<Table />, document.body)