React+Material UI实现点击邀请新增表单、点击删除移除表单求助

你当前使用布尔值控制表单显隐的写法只能支持单个表单渲染，要实现点击新增按钮添加表单、点击删除按钮删除对应表单的需求，将状态改为数组类型存储所有表单实例即可，完整实现代码如下：

import * as React from "react";
import Box from "@mui/material/Box";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import AccountCircle from "@mui/icons-material/AccountCircle";
import Button from "@mui/material/Button";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
import Stack from "@mui/material/Stack";

const Invites = () => {
  // 用数组存储所有表单的唯一标识，也可扩展为存储表单数据的对象数组
  const [formList, setFormList] = React.useState([]);

  // 新增表单：往数组追加新的唯一ID，这里用时间戳实现，可替换为uuid
  const addFormHandler = () => {
    setFormList(prev => [...prev, Date.now()]);
  };

  // 删除对应表单：根据传入的ID过滤掉对应项
  const deleteHandler = (targetId) => {
    setFormList(prev => prev.filter(formId => formId !== targetId));
  };

  return (
    <>
      <Stack direction="row" spacing={2}>
        <Button
          variant="contained"
          color="info"
          startIcon={<AddIcon />}
          onClick={addFormHandler}
        >
          ADD INVITE
        </Button>
      </Stack>

      {/* 遍历数组渲染所有表单 */}
      {formList.map(formId => (
        <Box key={formId} sx={{ "& > :not(style)": { m: 1 } }}>
          <FormControl>
            <Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
              <AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
              <TextField
                id={`input-name-${formId}`}
                label="姓名"
                variant="filled"
              />
            </Box>
            <Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
              <AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
              <TextField
                id={`input-email-${formId}`}
                label="邮箱"
                variant="filled"
              />
            </Box>
            <Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
              <AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
              <TextField
                id={`input-phone-${formId}`}
                label="手机号"
                variant="filled"
              />
            </Box>
            <Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
              <AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
              <TextField
                id={`input-dept-${formId}`}
                label="部门"
                variant="filled"
              />
            </Box>
            
            <Stack
              direction="row"
              spacing={4}
              style={{ marginLeft: 30, marginTop: 18, width: 500 }}
            >
              <Button 
                variant="contained" 
                size="large" 
                startIcon={<DeleteIcon />} 
                onClick={() => deleteHandler(formId)}
              >
                Delete
              </Button>
            </Stack>
          </FormControl>
        </Box>
      ))}
    </>
  );
};
export default Invites;

关键逻辑说明 #

• 新增逻辑：每次点击新增按钮，就往表单数组追加一个唯一ID，React会根据数组长度自动渲染新的表单块
• 删除逻辑：每个表单绑定自身的唯一ID，点击删除按钮时传入对应ID，过滤数组后即可删除对应表单
• 表单数据收集：如果需要收集所有表单的输入内容，可将数组项改为对象结构，存储对应表单的所有输入框值，配合TextField的onChange事件更新状态即可

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