时间戳

首页 > 解决方案 > 防止按下退出按钮

reactjs - 防止按下退出按钮

问题描述

如果我按下退出按钮，数据将被保存到数据库中。如果用户按下退出按钮，如何防止用户提交数据？以下代码来自 Material ui Dialog 组件。我尝试使用 e.keyCode === 27。在材料 ui e.keyCode === 27 中不起作用。如果用户按下转义按钮，我想阻止用户提交数据。

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import {getCookie} from "../../../../actions/02 user/01 auth"
import { userInfoEdit,createUserProfile } from '../../../../actions/02 user/02 profile';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const[name,setName] = React.useState(null)


  const handleClickOpen = () => {
    setOpen(true);
  };
  const token = getCookie("token")
  const handleClose1 = ()=>{
   setOpen(false)
  }
  const handleClose = async() => {
    setOpen(false);
    await userInfoEdit({name}, token); //api call
   await createUserProfile(token,{name}) // api call
    setName("");
  };

  return (
    <div>
      <Button size ="small" variant="outlined" color="primary" onClick={handleClickOpen}>
       Edit
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Edit Name</DialogTitle>
        <DialogContent>
          <DialogContentText>
             Edit name
          </DialogContentText>
             <TextField
            autoFocus
            label="Name"
            value={name}
            type="name"
            margin="normal"
            onChange={(e)=>setName(e.target.value)}
            variant="outlined"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose1} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary"
          disabled={name ? name.length <= 6:!name} 
          >
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

标签： reactjsmaterial-ui

解决方案

为什么要为and提供handleClose功能。如下分别给出。SubmitonClose

export default function FormDialog() {


const [open, setOpen] = React.useState(false);
  const[name,setName] = React.useState(null)


  const handleClickOpen = () => {
    setOpen(true);
  };
  const token = getCookie("token")
  const handleClose1 = ()=>{
   setOpen(false)
  }
  const popupClose = () => {
   setOpen(false);
  }
  const submitHandleClose = async() => {     
    popupClose();  
    await userInfoEdit({name}, token); //api call
   await createUserProfile(token,{name}) // api call
    setName("");
  };

  return (
    <div>
      <Button size ="small" variant="outlined" color="primary" onClick={handleClickOpen}>
       Edit
      </Button>
      <Dialog open={open} onClose={popupClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Edit Name</DialogTitle>
        <DialogContent>
          <DialogContentText>
             Edit name
          </DialogContentText>
             <TextField
            autoFocus
            label="Name"
            value={name}
            type="name"
            margin="normal"
            onChange={(e)=>setName(e.target.value)}
            variant="outlined"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={popupClose} color="primary">
            Cancel
          </Button>
          <Button onClick={submitHandleClose} color="primary"
          disabled={name ? name.length <= 6:!name} 
          >
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

推荐阅读