Antd4可编辑单元格.txt

import React,{Component} from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Popconfirm, Form } from "antd";
const EditableContext = React.createContext(null); //

class EditableRow extends Component {
  returnForm = React.createRef();
  render() {
    return (
      <Form ref={this.returnForm} component={false}>
        <EditableContext.Provider value={this.returnForm}>
          <tr {...this.props} />
        </EditableContext.Provider>
      </Form>
    );
  }
}

class EditableCell extends Component {
  state = {
    editing: false
  };

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

      }
    });
  };

  save = (e) => {
    const { record, handleSave } = this.props;
    let values = this.form.current.getFieldsValue();
    this.toggleEdit();
    handleSave({ ...record, ...values });
  };

  renderCell = (form) => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    let formParams = {
      one: {
        name: dataIndex,
        rules: [
          {
            required: true,
            message: `${title} is required.`
          }
        ],
        initialValue: record[dataIndex]
      }
    };
    return editing ? (
      <Form.Item {...formParams.one} style={{ margin: 0 }}>
        <Input