表格编辑 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}不能为空` }],
					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
        })
    };
});

来源链接：ant.design/components/…