javascript - useState 不适用于 Material ui 功能组件(firebase)

Question

我正在尝试制作一个使用 Material ui 功能组件的注册表单
我正在尝试将注册事件附加到“onClick”中的注册按钮
现在我试图在 useState() 中传递电子邮件和密码，然后尝试 console.log(email,password) 但它什么都不返回
控制台也不显示错误

   import React, { Component, useState } from 'react';
import {Route,} from "react-router-dom"
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import firebase from "firebase"



var Config ={ apiKey:"",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""

}

firebase.initializeApp(Config);
function signup(event){
const{email,password}=this.props;
   firebase.auth().createUserWithEmailAndPassword(email,password)
   .then((user) => {
     // Signed in 
     // ...
     console.log(email,password)
     var err = "Welcome "+ user.email;
     firebase.database().ref('users/'+user.uid).set({email: user.email,password:user.password});
  
   })
   .catch((error) => {
     var errorCode = error.code;
     var errorMessage = error.message;
     // ..
     console.log(errorMessage)
   });
  }

function Copyright() {
    return (
      <Typography variant="body2" color="textSecondary" align="center">
        {'Copyright © '}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>{' '}
        {new Date().getFullYear()}
        {'.'}
      </Typography>
    );
  }

  const useStyles = makeStyles((theme) => ({
    paper: {
      marginTop: theme.spacing(8),
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(3),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }));
 
   
  export default function SignUp(props) {
    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 up
          </Typography>
          <form className={classes.form}  noValidate>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
              <input
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
              
                onChange={(e) => {
                  setEmail(e.target.value);
                console.log(e.target.value)}}
                autoComplete="email"
                autoFocus
              />
              </Grid>
           
              <Grid item xs={12}>
                <input
                  variant="outlined"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  
                  onChange={(e) => {
                    setPassword(e.target.value)
                    console.log(e.target.value);}}
                  autoComplete="current-password"
                />
              </Grid>
              <Grid item xs={12}>
                <FormControlLabel
                  control={<Checkbox value="allowExtraEmails" color="primary" />}
                  label="I want to receive inspiration, marketing promotions and updates via email."
                />
              </Grid>
            </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
              onClick={signup}
            >
              Sign Up
            </Button>
          
            <Grid container justify="flex-end">
              <Grid item>
                <Link href="#" variant="body2">
                  Already have an account? Sign in
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        
        <Box mt={5}>
          <Copyright />
        </Box>
      </Container>
     
    
    );
      }

知道发生了什么吗？

Answer 1

我在这里看到两个问题:

您尝试从 this.props 访问电子邮件和密码但是您将其保留为组件中的局部状态变量。

您的 signup正如评论中已经提到的那样，方法超出了您的功能组件的范围。无论如何，您无法在此处访问电子邮件和密码。

将您的函数移动到组件函数中并删除这一行 const{email,password}=this.props;因为电子邮件和密码将在外部范围内可用。