如何点击提交按钮后将Material-UI Redux Form值输出到Material-UI Table

嘿，我刚帮朋友搞定过类似的需求，结合你有JavaScript基础但刚接触React的情况，咱们一步步来实现这个功能：

核心思路 #

首先我们需要保存表单提交后的数组数据，然后用Material-UI的Table组件把这个数组渲染成表格。这里用React的useState来管理提交后的状态就足够了——redux-form已经帮我们处理了表单的临时状态，提交后只需要把最终数据存到组件本地状态里就行。

完整示例代码 #

我直接给你写一个可运行的示例，你可以根据自己的业务字段调整：

import React, { useState } from 'react';
import { Field, FieldArray, reduxForm } from 'redux-form';
import {
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
  Paper, Button, TextField, Typography
} from '@mui/material'; // 若用Material-UI v4，替换为@material-ui/core

// 渲染FieldArray的单个条目
const renderItem = ({ fields, index, meta: { error } }) => (
  <div style={{ margin: '10px 0', display: 'flex', gap: '10px', alignItems: 'center' }}>
    <Field
      name={`${index}.name`}
      component={TextField}
      label="姓名"
      variant="outlined"
      size="small"
    />
    <Field
      name={`${index}.age`}
      component={TextField}
      label="年龄"
      type="number"
      variant="outlined"
      size="small"
    />
    <Button
      variant="outlined"
      color="error"
      onClick={() => fields.remove(index)}
    >
      删除
    </Button>
    {error && <span style={{ color: 'red', fontSize: '12px' }}>{error}</span>}
  </div>
);

// 主表单组件
const MyForm = ({ handleSubmit, pristine, reset, submitting }) => {
  // 存储提交后的表单数据
  const [submittedData, setSubmittedData] = useState([]);

  // 表单提交处理函数
  const onSubmit = (formValues) => {
    // 把FieldArray的数组数据存入本地状态
    setSubmittedData(formValues.items);
    // 这里也可以添加接口请求等逻辑
    console.log('提交的原始数据:', formValues.items);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <Typography variant="h6" gutterBottom>
        人员信息录入表单
      </Typography>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* FieldArray组件，对应表单中的数组字段 */}
        <FieldArray name="items" component={renderItem} />
        <div style={{ margin: '20px 0', display: 'flex', gap: '10px' }}>
          <Button
            variant="outlined"
            onClick={() => document.querySelector('[name="items"]').props.fields.push({})}
          >
            添加人员
          </Button>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            disabled={pristine || submitting}
          >
            提交表单
          </Button>
          <Button
            type="button"
            variant="outlined"
            disabled={pristine || submitting}
            onClick={reset}
          >
            重置表单
          </Button>
        </div>
      </form>

      {/* 提交后展示的Material-UI表格 */}
      {submittedData.length > 0 && (
        <TableContainer component={Paper} style={{ marginTop: '30px' }}>
          <Typography variant="h6" style={{ padding: '10px 16px' }}>
            已提交的人员信息
          </Typography>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>序号</TableCell>
                <TableCell>姓名</TableCell>
                <TableCell>年龄</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {submittedData.map((item, idx) => (
                <TableRow key={idx}>
                  <TableCell>{idx + 1}</TableCell>
                  <TableCell>{item.name}</TableCell>
                  <TableCell>{item.age}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* 未提交时的空状态提示 */}
      {submittedData.length === 0 && (
        <Typography variant="body1" style={{ marginTop: '30px', color: '#666' }}>
          请填写表单并提交，查看已录入的人员信息
        </Typography>
      )}
    </div>
  );
};

// 用reduxForm高阶组件包装表单
export default reduxForm({
  form: 'staffForm' // 表单唯一标识，需全局唯一
})(MyForm);

关键注意点 #

1. redux-form基础配置：确保你的Redux Store已经注册了redux-form的reducer，否则表单无法正常工作：

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

export default combineReducers({
  form: formReducer, // 必须注册这个reducer
  // 其他自定义reducer...
});

2. Material-UI版本适配：如果使用v4版本，将导入路径从@mui/material替换为@material-ui/core，组件用法基本一致。
3. 字段自定义：你可以修改renderItem里的Field字段（比如添加邮箱、职位等），然后在表格中对应增加列即可。
4. 表单校验：如果需要校验，可以在reduxForm配置中添加validate函数，或者给单个Field加validate属性，提交前会自动触发校验。

这样点击提交按钮后，表单里的FieldArray数据就会实时展示在Material-UI的表格里啦～

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