Question

I want to create a custom modal that I can use for multiple actions on the same page, for that I have created a state to store, title, description, and submit function for modal click and modal open state. I also want to take user comments before submitting on the modal, for that I have defined another state text. I passed it inside a modal. when the text inside is changing text state is updated, i also used the same state inside my submit function over there it is not getting reflected. why this is happening?

I want my handleSubmit function to print text added in modal when I click on modal submit.

编码和盒式链接——>

<>中文本>

const defaultModal = {
  open: false,
  title: "",
  description: "",
  handleSubmit: null,
};
const Parent = () => {
  const [modal, setModal] = useState(defaultModal);
  const [text, setText] = useState("");

  const handleSubmit = () => {
    console.log(text + " in submit");
    setModal(defaultModal);
  };

  const handleDelete = () => {
    console.log(text + "in delete");
    setModal(defaultModal);
  };

  const openSubmitModal = () => {
    setModal(prev=>({
      ...prev,
      open: true,
      title: "Are you sure to submit",
      description: "now yo are submitting",
      handleSubmit: handleSubmit,
    }));
  };

  const openDeleteModal = () => {
    setModal(prev=>({
      ...prev,
      open: true,
      title: "Are you sure to submit",
      description: "now yo are submitting",
      handleSubmit: handleDelete,
    }));
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        p: 4,
      }}
    >
      <Box>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, aliquid?
      </Box>
      <Box>
       {text}
      </Box>
      <Modal
        title={modal?.title}
        description={modal?.description}
        open={modal?.open}
        handleSubmit={modal?.handleSubmit}
        text={text}
        onTextChange={(e) => setText(e.target.value)}
        handleClose={()=>setModal(defaultModal)}
      />
      <Box>
        <ButtonGroup
          variant="contained"
          aria-label="outlined primary button group"
        >
          <Button onClick={openSubmitModal}>submit</Button>
          <Button onClick={openDeleteModal}>delete</Button>
        </ButtonGroup>
      </Box>
    </Box>
  );
};

export default Parent;

Modal Component

export default function Modal({open,title,description,handleSubmit,handleClose,text,onTextChange}) {

  return (
      <Dialog
        open={open}
        onClose={handleClose}
        PaperProps={{
          component:  form ,
          onSubmit: (event) => {
            event.preventDefault();
            handleSubmit();
          },
        }}
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {description}
          </DialogContentText>
          <TextField
            autoFocus
            required
            margin="dense"
            label="Comments"
            type="text"
            value={text}
            onChange={onTextChange}
            fullWidth
            variant="standard"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button type="submit">Submit</Button>
        </DialogActions>
      </Dialog>
  );
}

Answer 1

Your "text" value is saved in the closure and this value is used in the future. Change the code as follows:

Parent.jsx

const handleSubmit = (value) => {
  console.log(value + " in submit");
  setModal(defaultModal);
};

Modal.jsx

onSubmit: (event) => {
  event.preventDefault();
  handleSubmit(text);
},

友情链接