每當點擊邀請按鈕時，都應該添加新表單，當點擊刪除按鈕時，表單被刪除，任何人都可以幫助我嗎？

Question

Invite.js這是我的邀請組件，其中邀請按鈕位於表單外部，刪除按鈕位於表單內部 在此，我使用了使用狀態，並且從 material-ui 中獲取了此表單，如果有人可以幫助我我該如何解決我的問題？ plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

 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 [ addForm,setAddForm]=React.useState(false)
 const [deleteForm, setdeleteForm]=React.useState(false)

  const setAddFormHandler = () => {
  console.log("clicked");
  setAddForm(true);
   };

  const deleteHandler=()=>{
   setdeleteForm(true)
  }

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

       {addForm ?<Box 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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          variant="filled"
          
        />
      </Box>
      
      <Stack
        direction="row"
        spacing={4}
        style={{ marginLeft: 30, marginTop: 18, width: 500 }}
      >
        <Button variant="contained" size="large" startIcon={<DeleteIcon />} onClick= 
     {deleteHandler}>
          Delete
        </Button>
      </Stack>
    </FormControl>
    </Box>:null}
   </>
   );
   };
   export default Invites;

Answer 1

首先，你的問題令人困惑。 所以我在這里添加了兩個解決方案，它們解決了問題的兩個方面，您可以選擇與您相匹配的一個。

Sol 1：您想為每次點擊邀請按鈕創建新表單（多個表單）

下面的解決方案將在每次單擊邀請按鈕時向同一頁面添加新表單，並在單擊刪除按鈕后刪除相應的表單。

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 [forms, setForm] = React.useState({ val: []});

function createcustomForms() {
    return forms.val.map((el, i) =>
      <div key={i}>
          <Box 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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          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-with-sx"
          label="With sx"
          variant="filled"
          
        />
      </Box>
      
      <Stack
        direction="row"
        spacing={4}
        style={{ marginLeft: 30, marginTop: 18, width: 500 }}
      >
        <Button variant="contained" size="large" startIcon={<DeleteIcon />} 
        onClick={(e) => removeForm(i)}>
          Delete
        </Button>
      </Stack>
    </FormControl>
    </Box>
      </div>
    );
  }

 const addForm = () => {
    setForm({ val: [...forms.val, '']})    
  }

 const removeForm = (i) => {
    let vals = [...forms.val];
    vals.splice(i,1);
    setForm({ val: vals });   
  }
  
 return (
  <>
   <Stack direction="row" spacing={2}>
    <Button
      variant="contained"
      color="info"
      startIcon={<AddIcon />}
        onClick={addForm}
    >
      ADD INVITE
    </Button>
     </Stack>
   {createcustomForms()}
     
  </>
  );
  };
  export default Invites;

Sol 2：您想在單擊邀請按鈕時創建一個表單並在單擊刪除按鈕時將其刪除（當前在您的代碼中刪除不起作用）

const deleteHandler=()=>{
   setdeleteForm(true)
  }

應該改為

 const deleteHandler=()=>{
      setAddForm(false);
      }