react 表格擴展與編輯

項目里有個需求是點擊表格某行的工料機，顯示對應定額下的工料機的表格數據，並能對兩個表格進行增刪改查，效果如下：

代碼如下：

// 引入 Component 組件
import React, { Component } from 'react';

//定義子表顯示
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 {
  getInput = () => {
    // 這里也可以通過其他值判斷顯示下拉框（比如dataIndex）
    if (this.props.inputType === 'number') {
      return <InputNumber />;
    }
    return <Input />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {(form) => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [{
                      required: true,
                      message: `請填寫${title}!`,
                    }],
                    initialValue: record[dataIndex],
                  })(this.getInput())}
                </FormItem>
              ) : restProps.children}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
} 

// 將上面的配置應用到子表中
const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

// 原始colums要把想要編輯的editable設置為true
const columns = OriginalColumns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataIndex === 'age' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),   // 判斷編輯哪一行
        }),
      };
    });

     // 判斷編輯哪一行的函數
     isEditing = record => record.id === this.state.editingKey;

    <Table 
      rowClassName="tableInput" 
      dataSource={tableData} 
      columns={columns} 
      pagination={false} 
      rowKey={record=>record.id} 
      getTableData={this.getTableData} 
      components={components}
      rowSelection={rowSelection}
      expandedRowRender={this.expandedRowRender}    // 字列表擴展函數
      expandIconColumnIndex={-1}                    // 隱藏默認展開樣式 
      expandIconAsCell={false}                      // 隱藏默認展開樣式  
      expandedRowKeys={expandedRowKeys}             // 展開的行的id
      defaultExpandedRowKeys={expandedRowKeys}
    />
    
  // 點擊工料機，獲取對應數據並展開，收起上一個展開的
  expandTable=(record,index)=>{
    this.setState({childTabData:[],parentTabId:record.id})
    // 如果已經展開則收回，否則展開
    let expandedRows = this.state.expandedRowKeys; 
    if(expandedRows.includes(record.id)){
      this.setState({expandedRowKeys: []})
    }else{
      // 獲取數據並展開當前行
      let arr = []
      arr.push(record.id)
      this.getStuffListById(record.id)
      this.setState({expandedRowKeys:arr}) 
    }
  } 

　　

 
          
            // 子列表 
           
          
            expandedRowRender=()=>{ 
           
          
            // 子列表也要編輯（字列表不用編輯可以不用，省略了一些子列表編輯代碼） 
           
          
            const childComponents = { 
           
          
            body: { 
           
          
             row: EdiChildTableFormRow,  
           
          
             cell: EdiChildTableCell, 
           
          
            }, 
           
          
            }; 
           
          
 
          
            const childColumns = childOriColumns.map((col) => { 
           
          
            if (!col.editable) { 
           
          
            return col; 
           
          
            } 
           
          
            return { 
           
          
            ...col, 
           
          
            onCell: record => ({ 
           
          
            record, 
           
          
            inputType: col.dataIndex === 'age' ? 'number' : 'text', 
           
          
            dataIndex: col.dataIndex, 
           
          
            title: col.title, 
           
          
            editing: this.isEditing(record), 
           
          
            }), 
           
          
            }; 
           
          
            }); 
           
          
 
          
            const { countKey, childTabData ,editingKey} = this.state; 
           
          
 
          
            return ( 
           
          
            <div className="childTab"> 
           
          
            <Table 
           
          
            rowClassName="tableInput" 
           
          
            columns={childColumns} 
           
          
            dataSource={this.state.childTabData} 
           
          
            rowKey={record=>record.id} 
           
          
            components={childComponents} 
           
          
            rowSelection={childRowSelection} 
           
          
            /> 
           
          
            <div className="childBtnBox"> 
           
          
            <Button className="mr20" onClick={addGlj} disabled={editingKey && editingKey.includes('new')? true:false}>新增</Button> 
           
          
            <Button disabled={this.state.onDeleteChildBtn} onClick={delChild}>刪除</Button> 
           
          
            </div> 
           
          
            </div> 
           
          
            ); 
           
          
 
          
            }