【已解决】Reactjs的Antd Pro中实现表格中支持可编辑的单元格

折腾：

【未解决】Antd Pro的ReactJS中实现既可以编辑单元格值又可以拖动排序的表格

期间，需要先去合并进来，使得Reactjs的Antd Pro中的Table中的cell是可以编辑值的。

经过一番折腾，参考：

https://ant.design/components/table-cn/#components-table-demo-edit-cell

中的示例代码。

【总结】

最后用代码：

src/components/EditableCell/index.js

import React, { PureComponent } from 'react';
import styles from './index.less';
import { Form, Input } from 'antd';

const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

export const EditableFormRow = Form.create()(EditableRow);

// export default class EditableCell extends PureComponent {
export class EditableCell extends PureComponent {

  state = {
    editing: false,
  }

  componentDidMount() {
    console.log("EditableCell componentDidMount: this.props.editable", this.props.editable)

    if (this.props.editable) {
      document.addEventListener('click', this.handleClickOutside, true);
    }
  }

  componentWillUnmount() {
    if (this.props.editable) {
      document.removeEventListener('click', this.handleClickOutside, true);
    }
  }

  toggleEdit = () => {
    console.log("toggleEdit=")
    console.log("this.state.editing=", this.state.editing)

    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  }

  handleClickOutside = (e) => {
    const { editing } = this.state;
    if (editing && this.cell !== e.target && !this.cell.contains(e.target)) {
      this.save();
    }
  }

  save = () => {
    console.log("save")
    const { record, handleSave } = this.props;
    console.log("record=", record)
    this.form.validateFields((error, values) => {
      console.log("form.validateFields=: error", error, ", values=", values)

      if (error) {
        return
      }
      this.toggleEdit();
      handleSave({ ...record, ...values });
    });
  }

  render() {
    const { editing } = this.state;

    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      // handleSave,
      ...restProps
    } = this.props;

    console.log("editing=", editing, ", editable=", editable, ", record=", record)

    return (
      <td ref={node => (this.cell = node)} {...restProps}>
        {editable ? (
          <EditableContext.Consumer>
            {(form) => {
              console.log("EditableContext.Consumer: form=", form)

              this.form = form;
              return (
                editing ? (
                  <FormItem style={{ margin: 0 }}>
                    {form.getFieldDecorator(dataIndex, {
                      rules: [{
                        required: true,
                        message: `${title} is required.`,
                      }],
                      initialValue: record[dataIndex],
                    })(
                      <Input
                        ref={node => (this.input = node)}
                        onPressEnter={this.save}
                      />
                    )}
                  </FormItem>
                ) : (
                  <div
                    className={styles.editableCellValueWrap}
                    // className={styles.nonEditableCellValueWrap}
                    style={{ paddingRight: 5 }}
                    onClick={this.toggleEdit}
                  >
                    {restProps.children}
                  </div>
                )
              );
            }}
          </EditableContext.Consumer>
        ) : restProps.children}
      </td>
    );
  }
}

src/components/EditableCell/index.less

@import '~antd/lib/style/themes/default.less';

.editable-cell {
  position: relative;
}

// .nonEditableCellValueWrap {
//   padding: 5px 12px;
//   cursor: pointer;
//   background: grey;
// }

.editableCellValueWrap {
  padding: 5px 12px;
  // padding: 2px 4px;
  cursor: pointer;
}

// .editable-row:hover .editableCellValueWrap {
// .editableRow:hover .editableCellValueWrap {
.editableCellValueWrap:hover {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 11px;
  // padding: 2px 4px;
}

调用：

src/routes/Script/ScriptCreate.js

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {
  Col,
  Form,
  Input,
  Button,
  Card,
  InputNumber,
  Select,
  message,
  Modal,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import { EditableCell, EditableFormRow} from '../../components/EditableCell'


import { Table } from 'antd';
...
const FormItem = Form.Item;
const InputGroup = Input.Group;
const { TextArea } = Input;
const { Option } = Select;

...

const columns = [
  // {
  //   title: 'Name',
  //   dataIndex: 'name',
  //   key: 'name',
  // }, {
  //   title: 'Age',
  //   dataIndex: 'age',
  //   key: 'age',
  // }, {
  //   title: 'Address',
  //   dataIndex: 'address',
  //   key: 'address',
  // },
  {
    title: '序号',
    width: "10%",
    dataIndex: 'number',
    key: 'number',
    // rowKey: 'number',
    // fixed: 'left',
    render(text, record, index) {
      return index + 1;
    },
  },
  {
    width: "15%",
    editable: true,
    title: 'Speaker/Song',
    dataIndex: 'speakerOrSong',
    key: 'speakerOrSong',
  },
  {
    width: "75%",
    editable: true,
    title: 'Content/Name',
    dataIndex: 'contentOrName',
    key: 'contentOrName',
  },
];

/* eslint-disable */
@DragDropContext(HTML5Backend)
class DragableOrEditableTable extends 
React.Component
 {
  state = {
    itemList: [],
  }

  constructor(props){
    super(props)
    console.log("DragableOrEditableTable constructor: props=", props)

    console.log("this.props.itemList=", this.props.itemList)

    this.handleSaveEditableCell = this.handleSaveEditableCell.bind(this)

    this.state.itemList = this.props.itemList;
  }

  components = {
    body: {
      row: EditableFormRow,
      cell: EditableCell,
    },
  }

  handleSaveEditableCell = (row) => {
    console.log("handleSaveEditableCell: row=", row)

    const newData = [...this.state.itemList];
    console.log("newData=", newData)
    const index = newData.findIndex(item => row.key === item.key);
    console.log("index=", index)
    const item = newData[index];
    console.log("item=", item)
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    console.log("newData=", newData)
    this.setState({ itemList: newData });
    console.log("this.state.itemList=", this.state.itemList)
  }

  render() {
    console.log("DragableOrEditableTable render: this.state.itemList=", this.state.itemList)

    const curColumns = columns.map((col) => {
      console.log("curColumns: col=", col)

      if (!col.editable) {
        return col;
      }

      return {
        ...col,
        onCell: record => ({
          record,
          // editable: col.editable,
          editable: record.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          form: this.props.form,
          handleSave: this.handleSaveEditableCell,
        }),
      }
    })

    return (
      <Table
        bordered
        // rowClassName={() => 'editable-row'}
        // rowClassName={'editable-row'}
        // columns={columns}
        columns={curColumns}
        dataSource={this.state.itemList}
        components={
this.components
}
        onRow={(record, index) => ({
          index,
        })}
      />
    );
  }
}

DragableOrEditableTable.defaultProps = {
  itemList: [],
  onListChange: (newDialogList) => {},
};

/* eslint-disable */

// const DemoSortableTable = DragDropContext(HTML5Backend)(DragableOrEditableTable);
// const DragableDialogTable = DragDropContext(HTML5Backend)(DragableOrEditableTable);


@connect(({ loading, script, topic }) => ({
  submitting: loading.effects['script/submitRegularForm'],
  script,
  topic,
}))
@Form.create()
export default class ScriptCreate extends PureComponent {
  constructor(props) {
    super(props)

    this.onDialogListChange = this.onDialogListChange.bind(this)

    this.state = {
      // dialogList: [],
      dialogList: this.demoItemList,

...
    }
  }

  demoItemList = [
    {
      key: '1',
      speakerOrSong: 'A',
      contentOrName: 'hi boy',
      editable: true,
    },
    {
      key: '2',
      speakerOrSong: 'B',
      contentOrName: 'hello',
      editable: true,
    },
    {
      key: '3',
      speakerOrSong: 'A',
      contentOrName: 'what are you doing?',
      editable: true,
    },
    {
      key: '4',
      speakerOrSong: 'B',
      contentOrName: 'I am singing',
      editable: true,
    },
    {
      key: '5',
      speakerOrSong: 'Song',
      contentOrName: 'this is a apple.mp3',
      editable: false,
    },
  ]

  // DragableDialogTable = DragDropContext(HTML5Backend)(DragableOrEditableTable)
  // DragableDialogTable = DragDropContext(HTML5Backend)(DragableOrEditableTable dialogList={demoItemList})

...

  render() {
 .....

    return (
      <PageHeaderLayout
        title="新建剧本"
      >
 ....

              <DragableOrEditableTable
                itemList={this.state.dialogList}
                onListChange={this.onDialogListChange}
                form={this.props.form}
              />
....
      </PageHeaderLayout>
    );
  }
}

实现要的效果：

鼠标移动上去有边框提示可以编辑：