ReactJS - gmail 的表单验证错误

Question

我有一个登录页面，我需要验证 gmail 的输入，即。名称应为 gmail 格式。我很确定函数的逻辑可以正常工作，但是在声明和调用函数的部分存在一些问题。这是我的代码：

const Login = () => {
    // const [name,setName] = useState('Shakthi Saravanan');
    // const {data:blogs, isPending, error} = useFetch('http://localhost:8000/blogs');

    function handleChange(field, e) {
        let fields = this.state.fields;
        fields[field] = e.target.value;
        this.setState({ fields });
      }

    function handleValidation() {
        let fields = this.state.fields;
        let errors = {};
        let formIsValid = true;

        //Name
        if (!fields["name"]) {
        formIsValid = false;
        errors["name"] = "Cannot be empty";
        }

        if (typeof fields["name"] !== "undefined") {
        if (!fields["name"].match(/^[a-zA-Z]+$/)) {
            formIsValid = false;
            errors["name"] = "Only letters";
        }
        }

        //Email
        if (!fields["email"]) {
        formIsValid = false;
        errors["email"] = "Cannot be empty";
        }

        if (typeof fields["email"] !== "undefined") {
        let lastAtPos = fields["email"].lastIndexOf("@");
        let lastDotPos = fields["email"].lastIndexOf(".");

        if (
            !(
            lastAtPos < lastDotPos &&
            lastAtPos > 0 &&
            fields["email"].indexOf("@@") == -1 &&
            lastDotPos > 2 &&
            fields["email"].length - lastDotPos > 2
            )
        ) {
            formIsValid = false;
            errors["email"] = "Email is not valid";
        }
        }

        this.setState({ errors: errors });
        return formIsValid;
    }
    
    return ( 
        <div className="login-cot bg-danger" id="layoutAuthentication">
                    
            <div id="layoutAuthentication_content">
                <main>
                    <div className="container ">
                        
                        <div className="row justify-content-center ">
                            
                            <div className="col-lg-5 ">
                               
                                <div className="card shadow-lg border-0 rounded-lg mt-5 bg-secondary">
                                    <center><h1 className="bg-warning" style={{padding:"10px",}}><b><BsBugFill /><BsTools /> <BsColumns />  BFP</b></h1></center>
                                    <div className="card-header"><h3 className="text-center my-1"><b>Login</b></h3></div>
                                    <div className="card-body">
                                        <form>
                                            <div className="form-floating mb-3">
                                                <input className="form-control" id="inputEmail" type="email"
                                                 onChange={this.handleChange.bind(this, "name")} placeholder="name@example.com"
                                                 value={this.state.fields["name"]} />
                                                <label for="inputEmail">Email address</label>
                                            </div>
                                            <div className="form-floating mb-3">
                                                <input className="form-control" id="inputPassword" type="password" placeholder="Password" />
                                                <label for="inputPassword">Password</label>
                                            </div>
                                           
                                            <div className="d-flex align-items-center justify-content-between mt-4 mb-0">
                                                <Link className="small text-light" to="/forgotPassword">Forgot Password?</Link>
                                                <Link className="btn btn-success" to="/home">Login</Link>
                                            </div>
                                        </form>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
     );
}

但是我遇到了一个错误：

虽然我确信变量声明正确。 有必要把它渲染成一个类吗？

请帮忙

Answer 1

简答：这种代码风格需要类 Login 扩展组件。

“this”在 Javascript 中的真正含义非常不直观，如果我没记错的话，它与调用函数的上下文有关。

通过在 React 中创建一个类，您可以获得与您在更标准的面向对象语言中所期望的相似的东西。 this.state 等也是组件的功能，因此如果不扩展 this 将无法正常工作，请确保初始化状态。如果你想在功能上工作，你可以使用效果和钩子。