我在此代码中使用了redux和react-material。如果出现错误,我想显示带有错误消息的小吃栏。现在,仅使用此const errorMessage = "This is an error message";
的静态错误消息。出现errorMessage时如何显示小吃栏。请看下面我的代码。我还创建了一个codeandbox进行调试。谢谢
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>
);
};
https://material-ui.com/components/snackbars/#snackbar
创建Snackbar
并将诸如isOpen
之类的道具传递到此组件以显示消息,请记住设置variant:D。