reactjs - 如何使用反应钩子编写电子邮件和密码验证

Question

我正在那个项目中研究 React 我正在尝试使用反应钩子为电子邮件和密码编写验证但我不知道如何开始编写它，所以请帮助实现这一点。我真正想要的是在我的代码中硬编码电子邮件和密码。现在我只想为电子邮件和密码编写验证。我真正想要的是如果我输入不正确的电子邮件和正确的密码，那么在验证中它必须只显示请输入有效的电子邮件地址。如果我输入正确的电子邮件，那么它必须显示请输入正确的密码。如果两者都错误意味着它必须显示验证，请输入正确的电子邮件和密码。

这是我的代码

import React, { useState } from 'react';
import './Login.css';

const Login = () => {

    const [loginData, setLoginData] = useState(null)

    const loginCredentials = () => {
        if (loginData.email === '[e-mail]' && loginData.password === 'christina') {
        } else {
        }
    }


    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, loginData, { [name]: value })
        setLoginData(newData)
    }


    const handleSubmit = (e) => {
        e.preventDefault()
        loginCredentials()
    }  

return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-4'>
                    <div className='mainform mt-3'>
                        <form onSubmit={handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' className="form-control" id="email" onChange={handleChange}></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' className="form-control" id="password" onChange={handleChange}></input>
                            </div>
                    
                            <button type="submit"  className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login

标签： reactjsvalidationreact-hooks

Answer 1

首先，您的输入值不是受控元素。了解“受控组件”。

有很多方法可以实现这一目标。我认为您可以添加一个自定义挂钩来处理 onChange 和 reset 处理程序。

自定义钩子：

import { useState } from 'react';

const useInputState = (initialValues) => {
  const [state, setstate] = useState(initialValues);

  const onChangeHandler = (e) => setstate({
    ...state,
    [e.target.name]: e.target.value,
  });

  const reset = (field) => {
    if (field) {
      setstate({
        ...state,
        [field]: initialValues[field],
      });
    } else {
      setstate({
        ...initialValues,
      });
    }
  };

  return [state, onChangeHandler, reset];
};

export default useInputState;

然后在您的组件中使用该钩子。

import React, { useState } from 'react';
import UseInputState from '../hooks/useInputState';

const App = () => {
  const [value, onChangeHandler, reset] = UseInputState('');

  console.log({ value });

  const [emailAlert, setEmailAlert] = useState(null);
  const [passwordAlert, setPasswordAlert] = useState(null);

  const loginCredentials = () => {
    setEmailAlert(null);
    setPasswordAlert(null);
    const { email, password } = value;
    if (email !== '[e-mail]') {
      setEmailAlert('Please Enter valid Email Address');
    }
    if (password !== 'christina') {
      setPasswordAlert(' please enter correct password');
    }

    reset('');

    if (password === 'christina' && email === '[e-mail]') {
      setEmailAlert(null);
      setPasswordAlert(null);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    loginCredentials();
  };

  return (
    <div className='container'>
      <div className='row justify-content-center'>
        <div className='col-4'>
          <div className='mainform mt-3'>
            <form onSubmit={handleSubmit}>
              <div className='form-group'>
                <label htmlFor='email'>Email</label>
                <input
                  type='email'
                  name='email'
                  className='form-control'
                  id='email'
                  value={value.email || ''}
                  onChange={onChangeHandler}
                ></input>
              </div>
              <div className='form-group'>
                <label htmlFor='password'>Password</label>
                <input
                  type='password'
                  name='password'
                  className='form-control'
                  id='password'
                  value={value.password || ''}
                  onChange={onChangeHandler}
                ></input>
              </div>

              <button type='submit' className='btn btn-primary'>
                Submit
              </button>
            </form>

            {emailAlert && <div>{emailAlert}</div>}
            {passwordAlert && <div>{passwordAlert}</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;