Javascript 登录页面的状态_Javascript_Html_Reactjs_Authentication_Material Ui

Javascript 登录页面的状态

javascript html reactjs authentication material-ui

Javascript 登录页面的状态,javascript,html,reactjs,authentication,material-ui,Javascript,Html,Reactjs,Authentication,Material Ui,我发现了这个材质UI登录页面示例，因为它是预先设置的样式，所以我想使用这个。但是，我不知道如何存储用户名/密码等。如果我在开始时使用“State”，我会得到一个错误，即找不到State 如何更改代码以使其存储值 export default function LoginPage() { const classes = useStyles(); return ( <Container component="main" maxWidth="xs"> &l

我发现了这个材质UI登录页面示例，因为它是预先设置的样式，所以我想使用这个。但是，我不知道如何存储用户名/密码等。如果我在开始时使用“State”，我会得到一个错误，即找不到State

如何更改代码以使其存储值

export default function LoginPage() {


  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

导出默认函数LoginPage（）{
const classes=useStyles（）；
返回(
登录
登录
忘记密码了？
{“没有帐户？注册”}
);
}

要在函数组件内保存组件状态，请使用钩子：

导出默认函数LoginPage（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const classes=useStyles（）；
console.log（'email is'，email）；
console.log（'password is'，password）；
返回(
要在函数组件内保存组件状态，请使用钩子：
导出默认函数LoginPage（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const classes=useStyles（）；
console.log（'email is'，email）；
console.log（'password is'，password）；
返回(
这是因为state
仅在类组件中可用。在功能组件中，您有useState
挂钩。您可以将其用作：
import React, { useState } from "react";

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

import React，{useState}来自“React”；
导出默认函数LoginPage（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const classes=useStyles（）；
返回(
登录
setEmail（e.target.value）}
自动对焦
/>
setPassword（e.target.value）}
autoComplete=“当前密码”
/>
登录
忘记密码了？
{“没有帐户？注册”}
);
}
这是因为state
仅在类组件中可用。在功能组件中，您有useState
挂钩。您可以将其用作：
import React, { useState } from "react";

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

import React，{useState}来自“React”；
导出默认函数LoginPage（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const classes=useStyles（）；
返回(
登录
setEmail（e.target.value）}
自动对焦
/>
setPassword（e.target.value）}
autoComplete=“当前密码”
/>
登录
忘记密码了？
{“没有帐户？注册”}
);
}
这是一个函数组件，请使用react hooks（）。您尝试执行的操作（状态）仅在类组件中允许。这是一个函数组件，请使用react hooks（）。您尝试执行的操作（状态）仅在类组件中允许