如何将外部表单数据添加为Material-Table的默认数据

1. 初始化表格数据状态 #

首先确保组件中已正确声明表单和表格的状态变量。若需将表单数据作为表格默认初始数据，可直接在tableData初始化时传入对应结构的数据：

import { useState } from 'react';
import MaterialTable from '@material-table/core';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

const YourComponent = () => {
  // 表单状态
  const [borrower_Applicant, setBorrower_Applicant] = useState("");
  const [lenders, setLenders] = useState("");
  // 表格状态：初始化时添加表单默认数据（示例为空，可按需修改）
  const [tableData, setTableData] = useState([
    {
      name: { label: borrower_Applicant },
      type: { label: lenders }
    }
  ]);

  // ...其他逻辑
}

2. 添加表单提交逻辑 #

创建提交函数，将当前表单输入的数据添加到表格数据中：

const handleAddToTable = () => {
  // 简单验证表单非空
  if (!borrower_Applicant || !lenders) return;
  
  // 将表单数据转换为表格所需结构
  const newRow = {
    name: { label: borrower_Applicant },
    type: { label: lenders }
  };

  // 更新表格数据（保留原有数据，追加新行）
  setTableData(prev => [...prev, newRow]);
  
  // 清空表单输入（可选操作）
  setBorrower_Applicant("");
  setLenders("");
};

在表单区域添加提交按钮：

<Row>
  {/* 原有表单代码 */}
  <Col lg={12} style={{marginTop: '10px'}}>
    <Button 
      onClick={handleAddToTable} 
      variant="contained" 
      color="warning"
      disabled={isView || !borrower_Applicant || !lenders}
    >
      添加到表格
    </Button>
  </Col>
</Row>

3. 调整表格列与数据结构（可选） #

若觉得原有表格列的字段路径（name.label、type.label）不够直观，可修改列定义直接对应表单字段：

<MaterialTable
  title=""
  columns={[
    { title: '借款人/申请人姓名', field: 'borrower_Applicant' },
    { title: '贷款人', field: 'lenders' },
  ]}
  data={tableData}
  // 原有actions和options配置...
/>

此时提交函数中的新行结构需对应修改：

const newRow = {
  borrower_Applicant: borrower_Applicant,
  lenders: lenders
};

4. 处理默认数据展示 #

若希望页面加载时显示一条默认空行，直接在tableData初始化时添加：

const [tableData, setTableData] = useState([
  { borrower_Applicant: "", lenders: "" }
]);

内容的提问来源于stack exchange，提问作者Bruno