index.js

import React  from 'react'
import {
  Table, Input, Button, Popconfirm, Form,
} from 'antd';
import ReactDOM from 'react-dom'
import styles from './table.css';
const FormItem = Form.Item;
const EditableContext = React.createContext();

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

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

class EditableCell extends React.Component {
  state = {
    editing: false,
  }

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

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

  toggleEdit = () => {
    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 = () => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error) {
        return;
      }
      this.toggleEdit();
      handleSave({ ...record, ...values });
    });
  }

  render() {
    const { editing } = this.state;
    const {
      // editable,
      // dataIndex,
      // title,
      // record,
      // index,
      // handleSave,
      ...restProps
    } = this.props;
    return (
      <td ref={node => (this.cell = node)} {...restProps}>
        {/*{editable ? (*/}
        {/*<EditableContext.Consumer>*/}
        {/*{(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="editable-cell-value-wrap"*/}
        {/*style={{ paddingRight: 24 }}*/}
        {/*onClick={this.toggleEdit}*/}
        {/*>*/}
        {/*{restProps.children}*/}
        {/*</div>*/}
        {/*)*/}
        {/*);*/}
        {/*}}*/}
        {/*</EditableContext.Consumer>*/}
        {/*) : restProps.children}*/}
      </td>
    );
  }
}

export default class EditableTable extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      dataSource: [{
        key: '0',
        0: '险种',
        1: '保额',
        2: '保费',
        3:'缴费期限'
      }
      ],
      columns : [{
        title: '险种',
        dataIndex: '0',
        width: '25%',
        editable: true,
      }, {
        title: '保额',
        dataIndex: '1',
      }, {
        title: '保费',
        dataIndex: '2',
      }, {
        title: '期间',
        dataIndex: '3',
      }],
      count: 2,
    };
  }

  componentDidMount(){
    this.setState({
      dataSource:this.props.listTable,
      columns:this.props.listTitle,
    })
  }
  render() {
    const { dataSource } = this.state;
    const { scroll } = this.props;
    const columns = this.state.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
      };
    });
    return (
      <div>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          scroll={scroll}
        />
      </div>
    );
  }
}