登录验证-获取验证错误

Question

import React, { useContext } from "react";
    import {
      BoldLink,
      BoxContainer,
      FormContainer,
      Input,
      MutedLink,
      SubmitButton,
    } from "./common";
    import { Marginer } from "../marginer";
    import { AccountContext } from "./accountContext";
    
    export function LoginForm(props) {
      const { switchToSignup } = useContext(AccountContext);
    
      return (
        <BoxContainer>
          <FormContainer>
          <div class="form-group">
                <Input 
                type="text" 
                name="email" 
                value={this.state.input.email}
                onChange={this.handleChange}
                class="form-control" 
                placeholder="Enter email" 
                id="email" />
    
                <div className="text-danger">{this.state.errors.email}</div>
                </div>
    
            <div class="form-group">
                <Input 
                type="password" 
                name="password" 
                value={this.state.input.password}
                onChange={this.handleChange}
                class="form-control" 
                placeholder="Enter password" 
                id="password" />
    
                <div className="text-danger">{this.state.errors.password}</div>
                </div>
    
          </FormContainer>
          <Marginer direction="vertical" margin={10} />
          <MutedLink href="#">Forget your password?</MutedLink>
          <Marginer direction="vertical" margin="1.6em" />
          <SubmitButton type="submit">Signin</SubmitButton>
          <Marginer direction="vertical" margin="1em" />
          <MutedLink href="#">
            Don't have an accoun?{" "}
            <BoldLink href="#" onClick={switchToSignup}>
              Signup
            </BoldLink>
          </MutedLink>
        </BoxContainer>
       
      );
    }
    
    
    export class validLogForm extends React.Component {
        constructor() {
        super();
        this.state = {
          input: {},
          errors: {}
        };
         
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
         
      handleChange(event) {
        let input = this.state.input;
        input[event.target.name] = event.target.value;
      
        this.setState({
          input
        });
      }
         
      handleSubmit(event) {
        event.preventDefault();
      
        if(this.validate()){
            console.log(this.state);
      
            let input = {};
            input["email"] = "";
            input["password"] = "";
            this.setState({input:input});
      
            alert('Demo Form is submitted');
        }
      }
      
      validate(){
          let input = this.state.input;
          let errors = {};
          let isValid = true;
       
         
      
          if (!input["email"]) {
            isValid = false;
            errors["email"] = "Please enter your email Address.";
          }
      
          if (typeof input["email"] !== "undefined") {
              
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
            if (!pattern.test(input["email"])) {
              isValid = false;
              errors["email"] = "Please enter valid email address.";
            }
          }
      
          if (!input["password"]) {
            isValid = false;
            errors["password"] = "Please enter your password.";
          }
      
      
          if (typeof input["password"] !== "undefined") {
            if(input["password"].length < 6){
                isValid = false;
                errors["password"] = "Please add at least 6 charachter.";
            }
          }
      
      
          this.setState({
            errors: errors
          });
      
          return isValid;
      }
      render() {
        return (
            <form onSubmit={this.handleSubmit}>
            <AccountContext/>
            </form>
            );
        }
         
    }

错误：

TypeError：无法读取未定义的LoginForm c：/reactjs/hello-world/src/components/accountbox/LoginForm.js的属性“state”：23 2023 value={this.state.input.email}^24 onchange={this.handlechange}25 class=“form-control”26 placeholder=“enter email”

Answer 1

因为this.state不是loginform的一部分，所以出现了错误。您需要将state作为道具传递给LoginForm，对handlechange执行相同操作：

如果试图在validlogform中呈现loginform（使用大写）

<LoginForm onSubmit={this.handleSubmit} state={this.state} handleChange={this.handleChange}>

并将this用于loginform中的props:

<Input 
  type="text" 
  name="email" 
  value={props.state.input.email}
  onChange={props.handleChange}
  class="form-control" 
  placeholder="Enter email" 
  id="email" 
/>
<div className="text-danger">{props.state.errors.email}</div>