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);
     });
    }

   };

React.JS 验证两个输入

React.JS Validating Two Inputs

mysql

node.js

reactjs

passport.js