在 React 中将函数代码转换为组件代码

Question

我正在努力学习 React。我看到多个问题要求将函数反应代码转换为类组件。 我仍然必须提出我的问题。我想将此功能反应代码转换为类组件代码。

我已经完成了代码更改。但仍然在为 username 或 password 传递错误值时，错误字段未显示值。应该显示哪个{renderErrorMessage("uname")}和{renderErrorMessage("通过")}

import React, { Component } from 'react';

import './Login.css';

export default class Login extends Component {


  constructor(props){
    super(props);
    this.state = {errorMessages : {},
                  isSubmitted : false
                  };
  }
  
  render() {
    

  // User Login info
  const database = [
    {
      username: "user1",
      password: "pass1"
    },
    {
      username: "user2",
      password: "pass2"
    }
  ];

  const errors = {
    uname: "invalid username",
    pass: "invalid password"
  };

  const handleSubmit = (event) => {
    //Prevent page reload
    event.preventDefault();
    console.log("handleSubmit");

    var { uname, pass } = document.forms[0];
    console.log("handleSubmit, uname = "+uname.value);
    console.log("handleSubmit, pass = "+pass.value);
    // Find user login info
    const userData = database.find((param) => param.username === uname.value);
    console.log("handleSubmit, userData = "+userData);
    
    // Compare user info
    if (userData) {
      console.log("handleSubmit, inside if, userData = "+userData);
      console.log("handleSubmit, inside if, userData.password = "+userData.password);
      if (userData.password !== pass.value) {
        // Invalid password
        
        console.log("//Invalid password");
        this.setState({errorMessages : { name: "pass", message: errors.pass }});
        
        
        
      } else {
        // setIsSubmitted(true);
        this.setState({isSubmitted : true} );
        
      }
    } else {
        console.log("handleSubmit, inside else");
        // Username not found
      
        
        this.setState({errorMessages : { name: "uname", message: errors.uname }});
        
        
    }
  };



  // Generate JSX code for error message
  const renderErrorMessage = (name) =>{
    name === this.state.errorMessages.name && (
      <div className="error">{this.state.errorMessages.message}</div>
    );

    console.log("renderErrorMessage, this.state.errorMessages.name = "+this.state.errorMessages.name);
    console.log("renderErrorMessage, this.state.errorMessages.message = "+this.state.errorMessages.message);
  }

  // JSX code for login form
  const renderForm = (
    <div className="form">
      <form onSubmit={handleSubmit}>
        <div className="input-container">
          <label>Username </label>
          <input type="text" name="uname" required />
          <div>{renderErrorMessage("uname")}</div>
        </div>
        <div className="input-container">
          <label>Password </label>
          <input type="password" name="pass" required />
          <div>{renderErrorMessage("pass")}</div>
        </div>
        <div className="button-container">
          <input type="submit" />
        </div>
      </form>
    </div>
  );

      return (
        <div className="app">
          <div className="login-form">
            <div className="title">Sign In</div>
            {this.state.isSubmitted ? <div>User is successfully logged in</div> : renderForm}
          </div>
        </div>
      );
    
  }
}```

Answer 1

如果我对你的理解正确，你的问题是无效的用户名/密码在错误登录时不会在你的空 div 中弹出。这是因为你没有返回任何东西。如果您只是在函数中放置一个 return，并将 return 移动到函数的底部，它应该会按预期工作并且应该如下所示：

const renderErrorMessage = (name) => {
        console.log(
            'renderErrorMessage, this.state.errorMessages.name = ' +
                this.state.errorMessages.name
        );
        console.log(
            'renderErrorMessage, this.state.errorMessages.message = ' +
                this.state.errorMessages.message
        );

        return (
            name === this.state.errorMessages.name && (
                <div className='error'>
                    {this.state.errorMessages.message}
                </div>
            )
        );
    };