テーブルエディタ tableCell

import React from 'react';
import { Form, Input } from 'antd';
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 {
	constructor(props) {
		super(props);
		this.state = {
			editing: false
		};
	}
	toggleEdit = () => {
		const editing = !this.state.editing;
		this.setState({ editing }, () => {
			if (editing) {
				this.input.focus();
			}
		});
	};
	save = e => {
		const { record, handleSave } = this.props;
		this.form.validateFields((error, values) => {
			// if (error && error[e.currentTarget.id]) {
			// 	onError();
			// 	return;
			// }
			this.toggleEdit();
			handleSave({ ...record, ...values });
		});
	};
	renderCell = form => {
		this.form = form;
		let { editing } = this.state;
		const { title, dataIndex, record, children } = this.props;
		return editing ?
			<Form.Item style={{ margin: 0 }}>
				{form.getFieldDecorator(dataIndex, {
					rules: [{ required: true, message: `${title}NULLにできない` }],
					initialValue: record[dataIndex]
				})(
					<Input ref={node => (this.input = node)}
						 onBlur={this.save}
						 onPressEnter={this.save}/>
				)}
			</Form.Item>
			:
			<div className="editable-cell-value-wrap"
				 style={{ paddingRight: 24 }}
				 onClick={this.toggleEdit}>
				{children} <i className="iconfont icon-edit cursor-pointer text-primary font-size-12 ml-1"/>
			</div>;
	};
	render() {
		const {
			editable,
			dataIndex,
			title,
			record,
			index,
			handleSave,
			children,
			...restProps
		} = this.props;
		return (
			<td {...restProps}>
				{editable ? (
					<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
				) : (
					children
				)}
			</td>
		);
	}
}
const components = {
 body: {
 row: EditableCell.EditableFormRow,
 cell: EditableCell.EditableCell
 }
};
const columns = this.state.columns.map(col => {
 if (!col.editable) {
 return col;
 }
 return {
 ...col,
 onCell: record => ({
 record,
 editable: col.editable,
 dataIndex: col.dataIndex,
 title: col.title,
 handleSave: this.handleSave
 })
 };
});