react.js验证了两个输入

Question

我目前正在学习React JS。我有一个允许用户注册的寄存器文件。我想在将信息传递给该寄存器文件中的服务器之前，验证两个字段相互匹配。我的代码在下面显示以供视觉视图。我进行了一些搜索，并注意到一个名为“ Handlechange”的基本术语被抛弃了很多，但是我不确定如何将其用于“ Onchange”事件。任何建议将不胜感激。

import React, { useState } from 'react';
import Axios from 'axios';
import './Register.css';

function Register() {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');

   const register = () => { 
       Axios.post('http://localhost:3001/user/register', {
       firstName: firstName,
       lastName: lastName,
       email: email,
       password: password
     }).then((response) => {
       console.log(response);
     });
   };

   return (
     <div className='Register'>
     <h1>Registration</h1>
  <div className='RegisterForm'>
    <input type='text' name='firstName' placeholder='First Name' onChange={(event) => {setFirstName(event.target.value); }} />
    <input type='text' name='lastName' placeholder='Last Name' onChange={(event) => {setLastName(event.target.value); }} />
  </div>
  <div className='RegisterForm'>
    <input type='text' name='email' placeholder='Email'/>
    <input type='text' name='emailConfirmation' placeholder='Confirm Email' onChange={(event) => {setEmail(event.target.value); }} />
  </div>
  <div className='RegisterForm'>
    <input type='password' name='password' placeholder='Password'/>
    <input type='password' name='passwordConfirmation' placeholder='Confirm Password' onChange={(event) => {setPassword(event.target.value); }} />
  </div>
  <div className='RegisterForm'>
    <button onClick={register}>Register</button>
  </div>
</div>
 )
}

export default Register;

Answer 1

如果要验证字段，则在Axios调用之前，比较所需的字段/值，如果它们匹配，请调用Axios API，否则只需扔出在UI上显示的错误。

//Add validation inside the function
 const register = () => { 
    // check if firstName and LastName is not empty 
    // or any other validation you want - add it here.
      if(firstName === "" || LastName ===""){ 
           // alert the user for invalid values
            alert(" FirstName and LastName cannot be empty");
       }
       else  {
       Axios.post('http://localhost:3001/user/register', {
       firstName: firstName,
       lastName: lastName,
       email: email,
       password: password
     }).then((response) => {
       console.log(response);
     });
    }

   };