用react编写一个可以编辑的表格

这只一个雏形,但是可以用了。难点是如何点击每行后面的编辑按钮,让当前行的格子都变成input。

import {Component} from 'react'

const Action = props => {
  console.log(props)
  return (
    
); }; 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 = { data._name = e.target.value; }}/> data._path = data.path data._initPath = data.path data.path = { 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 ( {keys.map(key => )} {this .state .trs .map(function (tr) { return ( {keys .map(function (key, index) { return ( ) }, this)} ) }, this)}
{headers[key]}
{key === "action" ? : tr[key] }
) } } ReactDOM.render(, document.body)

你可能感兴趣的:(用react编写一个可以编辑的表格)