当我在 JSX 中让输入为空时，我的“必需”不起作用

Question

我正在制作一个 register.jsx 档案，但是当我单击按钮时，即使输入为空或未定义，他也可以工作。

我不知道我做错了什么，但我认为没有语法错误

Register.jsx代码：

import React from 'react'
import styles from "./Register.module.css"

import { useState, useEffect } from 'react'

const Register = () => {
  const [displayName, setDisplayName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [error, setError] = useState("")

  const handleSubmit = (e) => {
    e.preventDefault()
    setError("")
    const user = {
      displayName,
      email,
      password
    }
    if(password !== confirmPassword){
      setError("As senhas nao parecem iguais")
      return
    }
    console.log(user)
  }


  return (
    <div className={styles.register}>
      <h2>Cadastre-se para postar:</h2>
      <p>Crie seu usuário e compartile suas histórias!</p>
      <form onSubmit={handleSubmit}>
        <label>
          <span>Nome:</span>
          <input 
          required
          type="text" 
          name='displayName'
          placeholder='Nome do usuário'
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          />
        </label>
        <label>
          <span>Email:</span>
          <input 
          type="email"
          name="email"
          placeholder='Email do usuário'
          value={email}
          required
          onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <label>
          <span>Senha:</span>
          <input 
          required
          type="password" 
          name='password'
          placeholder='Senha do usuário'
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          />
        </label>
        <label>
          <span>Confirmação senha:</span>
          <input 
          type="password" 
          name='confirmPassword'
          required
          placeholder='Confirme sua senha'
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </label>
        <button className='btn' onClick={handleSubmit}>Cadastrar</button>
        {error && <p className='error'>{error}</p>}
      </form>
    </div>
    
  )
}

export default Register

当我导出到App.jsx时，我只是导入他，所以我不认为错误在这里。 应用程序.JSX：

import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom"
import './App.css'

// Pages
import Home from "./pages/Home/Home.jsx"
import About from "./pages/About/About.jsx"

// Components
import NavBar from "./components/NavBar.jsx"
import Footer from "./components/Footer.jsx"
import Login from "./pages/Login/Login.jsx"
import Register from "./pages/Register/Register.jsx"

function App() {

  return (
    <>
      <BrowserRouter>
        <NavBar />
        <div className="container">
          <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/about" element={<About/>} />
            <Route path="/login" element={<Login/>} />
            <Route path="/register" element={<Register/>} />
          </Routes>
        </div>
        <Footer />
      </BrowserRouter>
    </>
  )
}

export default App

Answer 1

只需删除按钮上的

onClick

，因为表单中已经有了

onSubmit

<button className='btn'>Cadastrar</button>