javascript - ReferenceError: fullName 未定义

Question

我必须创建一个注册表单，其中包含全名、电子邮件、密码、手机号码、出生日期，一旦电子邮件验证完成并且单击提交按钮后，它应该将我引导到登录页面。登录页面有一个电子邮件和密码（注册的详细信息不需要与登录名匹配），一旦单击按钮（验证后），它应该显示“欢迎”。我在这里分享文件。使用，react-router，Material UI。

登录.js

/* eslint-disable no-undef */
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Grid, Paper, TextField } from "@material-ui/core";
import { Button } from "@material-ui/core";
import Welcome from './Welcome';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      errors: {},
    };
    this.validate = this.validate.bind(this);
  }

  validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  validate() {
    const { email, password, errors } = this.state;
   
    if (!this.validateEmail(email)) {
      errors.email = "Provide valid email";
    }

    if (password.length > 5) {
      errors.password = "Provide min 5-digit password";
    }

    if (errors) {
      this.setState({ errors });
    } else {
      this.props.location.push('/Welcome');
    }
  }
      
  render() {
    const paperStyle = {
      padding: 20,
      height: "70vh",
      width: 280,
      margin: "20px auto",
    };

    return (
      <Grid>
        <Paper elevation={10} style={paperStyle}>
          <Grid align="center">
            <h2>Login</h2>
          </Grid>

          <TextField
            error={errors.email}
            label="Email"
            placeholder="Enter mail"
            fullwidth
            value={email}
            onChange={(e) => this.setState({ email: e.target.value })}
            required
            helperText={errors.password}
          />

          <TextField
            error={errors.password}
            label="Password"
            placeholder="Enter password"
            type="password"
            fullwidth
            required
            value={password}
            onChange={(e) => this.setState({ password: e.target.value })}
            helperText={errors.password}
          />

          {/*<Link to="/Welcome">*/}  
          <Button variant="contained" color="primary" onClick={this.validate}>
            Login
          </Button>
          {/*</Link> */}
        </Paper>
      </Grid>
     ); 
   }
 }

 export default Login;

注册.js

/* eslint-disable no-undef */
import React, { Component} from 'react';

import { Link } from "react-router-dom";
import { Grid, Paper, TextField } from "@material-ui/core";
import { Button } from "@material-ui/core";
import Login from './Login';
    
class Registration extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullName: "",
      mobileNumber: "",
      email: "",
      password: "",
      errors: {},
    };
    
    this.validate = this.validate.bind(this);
  }
      
  validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }
  
  validate() {
    const { fullName, email, password, errors } = this.state;
   
    if (!this.validateEmail(email)){
      errors.email = "Provide valid email";
    } 

    if (password.length > 5){
      errors.password = "Provide min 5-digit password";    
    } 
  
    if (errors) {
      this.setState({ errors });        
    } else {
      this.props.location.push('/Login');
    } 
  }

  render() {
    const paperStyle = {
      padding: 20,
      height: "70vh",
      width: 280,
      margin: "20px auto",
    };

    return (
      <Grid>
        <Paper elevation={10} style={paperStyle}>
          <Grid align="center">
            <h2>Login</h2>
          </Grid>

          <TextField
            label="Full name"
            placeholder="Enter name"
            fullwidth
            value={fullName}
            onChange={(e) => this.setState({ fullName: e.target.value })}
            required
            helperText={errors.fullName}
          />

          <TextField                
            type = 'number'
            label="Mobile number"
            placeholder="Enter mobile number"
            fullwidth
            // eslint-disable-next-line no-undef
            value={mobileNumber}
            onChange={(e) => this.setState({ mobileNumber: e.target.value })}
            required
            helperText={errors.mobileNumber}
          />

          <TextField
            error={errors.email}
            label="Email"
            placeholder="Enter mail"
            fullwidth
            value={email}
            onChange={(e) => this.setState({ email: e.target.value })}
            required
            helperText={errors.email}
          />

          <TextField
            error={errors.password}
            label="Password"
            placeholder="Enter password"
            type="password"
            fullwidth
            required
            value={password}
            onChange={(e) => this.setState({ password: e.target.value })}
            helperText={errors.password}
          />
          {/*<Link to="/Login">*/} 
          <Button variant="contained" color="primary" onClick={this.validate}>
            Register here
          </Button>
          {/*</Link>*/}
        </Paper>
      </Grid>
    );
  }
}

export default Registration;

应用程序.js

import React, { Component } from "react";
import "./App.css";
import Login from "./Login";
import Registration from "./Registration";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Welcome from "./Welcome";
import { Typography } from "@material-ui/core";

class App extends Component {
  render() {
    return (
      <Router>
        <Typography>
          <div className="App">
            <Switch>
              <Route path="/" exact component={Registration} />
              <Route path="/Login" component={Login} />
              <Route path="/Welcome" component={Welcome} />
            </Switch>
          </div>
        </Typography>
      </Router>
    );
  }
}

export default App;

欢迎js

import React from "react";

function Welcome() {
  return <h1>Welcome</h1>;
}
export default Welcome;

标签： javascriptreactjs

Answer 1

您需要const { fullName, email, password, errors } = this.state;在render和之前添加return