Reac AntDesign Table,select,input,textArea综合弹窗表单，一次获取全部数据未完成

Question

将select集成到table里了，单次选择能获取select数据，如何一次获取全部数据呢 ？尝试用antD的表单提交，“画蛇添足”地在下图左侧加了一个submit按钮，但是关联有问题，未成功。（看官方例子，有input，select组成的表单一次提交）

问题关键点：如何将自定义的Table及Table以外的数据绑定到antD支持的Form表单上。

1.当前效果如下：

2.弹窗组件代码：

import { Form, Input, Modal, Table, Button, Popconfirm, Row, Col, Select } from 'antd';
import React, { Component } from 'react';

import { FormComponentProps } from 'antd/es/form';
import { TableListItem } from '../data.d';

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);

export interface FormValueType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface ConnectFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  ConnectModalVisible: boolean;
  values: Partial<TableListItem>;
}

export interface ConnectFormState {
  formVals: FormValueType;
}

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 });
    });
  };



  onChange(value) {
    console.log(value);
  }
  handleSelectChange = value => {
    console.log(value);
    this.form.setFieldsValue({
      selectValue: `${value}`,
    });
  };
  

  renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    // console.log(dataIndex)
    const { editing } = this.state;
    const { getFieldDecorator } = this.form;
    if(dataIndex=='field'){
      return (
        <Form.Item style={{ margin: 0 }}>
          {form.getFieldDecorator(dataIndex, {
            
            initialValue: '请选择主表字段' //record[dataIndex]
          })(
            <Select className='table-user-name-input'
            showSearch
            placeholder="请选择主表字段"
            optionFilterProp="children"
            onChange={this.onChange}
            >
              <Option value="1/字段1">字段1</Option>
              <Option value="2/字段2">字段2</Option>
              <Option value="3/字段3">字段3</Option>
  
            </Select>
          )}
        </Form.Item>
      ) 
    }else if(dataIndex=='operator'){
      return (
        <Form.Item style={{ margin: 0 }}>
          {form.getFieldDecorator(dataIndex, {
            
            initialValue: '请选择运算符' //record[dataIndex]
          })(
            <Select className='table-user-name-input'
            showSearch
            placeholder="请选择运算符"
            optionFilterProp="children"
            onChange={this.onChange}
            >
            <Option value="1/等于">=</Option>
            <Option value="2/大于">></Option>
            <Option value="3/小于">=</Option>
  
            </Select>
          )}
        </Form.Item>
      ) 
    }else if(dataIndex=='tablefield'){
      return (
        <Form.Item style={{ margin: 0 }}>
          {form.getFieldDecorator(dataIndex, {
            
            initialValue: '请选择连接表字段' //record[dataIndex]
          })(
            <Select className='table-user-name-input'
            showSearch
            placeholder="请选择连接表字段"
            optionFilterProp="children"
            onChange={this.onChange}
            >
            <Option value="1/字段a">字段a</Option>
            <Option value="2/字段b">字段b</Option>
            <Option value="3/字段c">字段c</Option>
  
            </Select>
          )}
        </Form.Item>
      ) 
    }

  };

  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 ConnectForm extends Component<ConnectFormProps, ConnectFormState> {
  static defaultProps = {
    handleUpdate: () => {},
    handleConnectModalVisible: () => {},
    values: {},
  };

  constructor(props: ConnectFormProps) {
    super(props);
    this.columns = [
      {
        title: "主表字段",
        dataIndex: "field",
        editable: true,

      },
      {
        title: "运算符",
        dataIndex: "operator",
        editable: true,

      },
      {
        title: "连接表字段",
        dataIndex: "tablefield",
        editable: true,

      },
      {
        title: "操作",
        dataIndex: "operation",
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm
              title="确定要删除？"
              onConfirm={() => this.handleDelete(record.key)}
            >
              <a>删除</a>
            </Popconfirm>
          ) : null
      }
    ];

    this.state = {
      dataSource: [
        {
          key: "0",
          field: "ID",
          operator: "VARCHAR2",
          tablefield: "255",
        },
        {
          key: "1",
          field: "ID12",
          operator: "VARCHAR212",
          tablefield: "25512",
        }
      ],
      count: 2
    };
  }

  handleDelete = key => {
    const dataSource = [...this.state.dataSource];
    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
  };

  handleAdd = () => {
    const { dataSource } = this.state;
    const newData = {
      field: '请输入主表字段',
      operator: '请输入运算符',
      tablefield: '请输入连接表字段'
    };
    this.setState({
      dataSource: [...dataSource, newData],
    });
  };

  handleSave = row => {
    const newData = [...this.state.dataSource];
    
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row
    });
    this.setState({ dataSource: newData });
  };

  okHandle = () => {
    alert('111');
    // form.validateFields((err, fieldsValue) => {
    //   if (err) return;
    //   form.resetFields();
    //   handleAdd(fieldsValue);
    // });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { ConnectModalVisible, onCancel: handleConnectModalVisible, values } = this.props;
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell
      }
    };
    const columns = this.columns.map(col => {
      console.log(col)
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave
        })
      };
    });

    return (
      <Modal
        width={1000}
        destroyOnClose
        title="设置连接组件"
        visible={ConnectModalVisible}
        onOk={this.okHandle}
        onCancel={() => handleConnectModalVisible(false, values)}
        afterClose={() => handleConnectModalVisible()}
        maskClosable={false}
        cancelText={'重置'}
        okText={'提交'}
      >
        <Form layout="vertical"  onSubmit={this.handleSubmit}>
          <Row>
            <Col span={7}>
              <Form.Item label="主表">
                <Input disabled value={values.name}/>
              </Form.Item>
            </Col>
            <Col span={1}></Col>
            <Col span={8}>
              <Form.Item label="连接方式">
              <Select defaultValue="左连接">
                <Option value="右连接">右连接</Option>
                <Option value="左连接">左连接</Option>
                <Option value="全连接">全连接</Option>
              </Select>
              </Form.Item>
            </Col>
            <Col span={1}></Col>
            <Col span={7}>
              <Form.Item label="连接表">
                <Input disabled value={values.desc}/>
              </Form.Item>
            </Col>
          </Row>
          
          <Form.Item label="连接条件">
              <div id="components-table-demo-edit-cell">
              <Button
                onClick={this.handleAdd}
                type="primary"
                style={{ marginBottom: 16 }}
              >
                新增字段
              </Button>
              <Table
                components={components}
                rowClassName={() => "editable-row"}
                bordered
                dataSource={dataSource}
                columns={columns}
              />
              </div>
          </Form.Item>
          <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<ConnectFormProps>()(ConnectForm);