antd 封裝雙擊可編輯的單元格

因為項目需要，所以基於antd封裝一個雙擊單元格可以編輯內容的表格，廢話不多說，直接看代碼：

首先，在項目中創建一個EditTable.tsx的文件;在文件中引入需要的模塊；

import React from 'react';
import { Table } from 'antd'; 
import _ from 'lodash';

const FormItem = Form.Item;
const { Option } = Select;
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,
     };
 
     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]) {
                 return;
             }
             this.toggleEdit();
             handleSave({ ...record, ...values });
         });
     };

     renderCell = form => {
         this.form = form;
         const { children, dataIndex, record, title } = this.props;
         const { editing } = this.state;
         return editing ? (
             <Form.Item style={{ margin: 0 }}>
                 {form.getFieldDecorator(dataIndex, {
                     initialValue: record[dataIndex],
                 })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
             </Form.Item>
         ) : (
                 <div
                     className="editable-cell-value-wrap"
                     style={{ paddingRight: 24, minHeight: 22, cursor: "pointer" }}
                     onDoubleClick={this.toggleEdit}
                 >
                     {children}
                 </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>
         );
     }
 }
 
 class editable extends React.Component {
     constructor(props) {
         super(props);
     }

     handleSave = row => {//row為選中的某一行
         const { detailUrlstore, dataSource } = this.props;
         const newData = [...this.props.dataSource];
         const index = newData.findIndex(item =>
             row.id === item.id   //判斷選中行的index
         );
         const item = newData[index];
         newData.splice(index, 1, {
             ...item,
             ...row,
         });//將當前行的數據替換為修改之后的數據
         this.props.handleClickdata({
            dataSource: {
                 ...item,
                 ...row,
             },
             newData: newData
         })//將修改之后的數據傳回父組件做操作
     };

     renderTable = () => {
         const { dataSource, showTitle } = this.props;
         const components = {
             body: {
                 row: EditableFormRow,
                 cell: EditableCell,
             },
         }; 
 
         let columns = this.props.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,
                 }),
             };
         })
 
         return (
             <Table
                 dataSource={dataSource}
                 columns={columns}
                 components={components}
                 size="small"
                 bordered
                 pagination={false}
                 showHeader={showTitle ? false : true}
                 style={{ margin: '10px', }}
             />
         );
     };
 
     render() { 
         return (
             <div className="summary-card">
                 {this.renderTable()}
             </div> 
         );
     }
  }
 
 export default editable;

接下來就可以直接調用上面封裝的內容：

 import React from 'react'; 
 import Editable from "./Editable" 
 class tableComponent extends React.Component {   store = this.props.store;   //獲取到子組件的修改結果,進行自己需要的操作   handleClick = (info) => {   // info.dataSource 本次修改的信息   // info.newData 完整的表格信息   }  
  render() {   const { tableData, manualBriefing } = this.store   let columns = [   {  title: '名稱',   dataIndex: 'id',   key: 'id',   width: "20%",   className: "mainbusiness-title",   render: (text, record) => {                      return <span>{record.id}</span>
  }   },   {   title: '內容',   dataIndex: 'CONTENT',   key: 'CONTENT',   width: "80%",   editable: true,   },   ];   return (              <Editable dataSource={[...manualBriefing]} columns={columns} handleClickdata={this.handleClick} showTitle="false" />
  );   }  }  
 export default tableComponent;