如何在ReactJS中显示错误消息Snackbar

问题描述 投票:0回答:1

我在此代码中使用了redux和react-material。如果出现错误,我想显示带有错误消息的小吃栏。现在,仅使用此const errorMessage = "This is an error message";的静态错误消息。出现errorMessage时如何显示小吃栏。请看下面我的代码。我还创建了一个codeandbox进行调试。谢谢

CLICK HERE

const LoginForm = props => {
  const { className, ...rest } = props;
  const classes = useStyles();
  const isLoggedIn = true;
  const errorMessage = "This is an error message";
  const [open, setOpen] = React.useState(false);

  const signIn = () => {
    console.log("signin", values.username, values.password);
    //dispatch(login(values.username, values.password));
  };

  const {
    values,
    touched,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit
  } = props;

  if (isLoggedIn) {
    console.log("isLoggedIn", isLoggedIn);
  }

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  return (
    <Card {...rest} className={clsx(classes.root, className)}>
      <form onSubmit={handleSubmit}>
        <CardHeader
          title="LOGIN"
          classes={{
            title: classes.cardHeader
          }}
          className={classes.cardHeader}
        />

        <CardContent className={classes.textFieldSection}>
          <TextField
            fullWidth
            label="Username"
            name="username"
            type="text"
            variant="outlined"
            value={values.username}
            onChange={handleChange}
            onBlur={handleBlur}
            helperText={touched.username ? errors.username : ""}
            error={touched.username && Boolean(errors.username)}
            InputProps={{
              endAdornment: (
                <InputAdornment>
                  <AccountCircle />
                </InputAdornment>
              )
            }}
          />
          <TextField
            fullWidth
            label="Password"
            name="password"
            style={{ marginTop: "1rem" }}
            type="password"
            variant="outlined"
            value={values.password}
            onChange={handleChange}
            onBlur={handleBlur}
            helperText={touched.password ? errors.password : ""}
            error={touched.password && Boolean(errors.password)}
            InputProps={{
              endAdornment: (
                <InputAdornment>
                  <LockIcon />
                </InputAdornment>
              )
            }}
          />
        </CardContent>

        <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
          <Alert onClose={handleClose} severity="error">
            ERROR
          </Alert>
        </Snackbar>

        <CardActions className={classes.loginButtonSection}>
          <Button
            type="submit"
            color="primary"
            variant="contained"
            onClick={signIn}
            className={classes.loginButton}
            disabled={isSubmitting}
          >
            Log In
          </Button>
        </CardActions>
      </form>
    </Card>
  );
};
javascript reactjs redux react-redux react-material
1个回答
0
投票

https://material-ui.com/components/snackbars/#snackbar

创建Snackbar并将诸如isOpen之类的道具传递到此组件以显示消息,请记住设置variant:D。

© www.soinside.com 2019 - 2024. All rights reserved.