reactjs - 默认值未在反应中清除

问题描述

我有一个反应 jsx 屏幕片段，如下所示：

import React,{useState} from "react";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ErrorCodes from './ErrorCodes.jsx';

export default function RegisterScreen()
{

  const [Device_ID,setDevice_ID] = useState('');
  const [Registerar_UserName,setRegisterar_UserName] = useState('');
  const [Registerar_Email,setRegisterar_Email] = useState('');
  const [Organisation_Name,setOrganisation_Name] = useState('');
  const [Organisation_Email,setOrganisation_Email] = useState('');
  const [Password,setPassword] = useState('');
  const [ReenterPassword,setReenterPassword] = useState('');

  const [Device_ID_Error,setDevice_ID_Error] = useState('');
  const [Registerar_UserName_Error,setRegisterar_UserName_Error] = useState('');
  const [Registerar_Email_Error,setRegisterar_Email_Error] = useState('');
  const [Organisation_Name_Error,setOrganisation_Name_Error] = useState('');
  const [Organisation_Email_Error,setOrganisation_Email_Error] = useState('');
  const [ReenterPassword_Error,setReenterPassword_Error] = useState('');
  
    return <Form className = "FormAligner">
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Registered Device ID</Form.Label>
      <Form.Control type="text"
      onChange = {e=>{
        setDevice_ID(e.target.value);
        if(Device_ID.length!=12)
        setDevice_ID_Error(ErrorCodes[5]);
        else
        setDevice_ID_Error(ErrorCodes[0]);

      }}
      placeholder="Device ID" value={Device_ID}/>
      <Form.Text className="text-muted">
        {Device_ID_Error}
        </Form.Text>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Industry Name</Form.Label>
      <Form.Control type="text" placeholder="Industry Name" 
      onChange={e=>{
        setRegisterar_UserName(e.target.value);
        if(Registerar_UserName.length===0)
        setRegisterar_UserName_Error(ErrorCodes[1]);
        else
        setRegisterar_UserName_Error(ErrorCodes[0]);

      }}
      value={Registerar_UserName}/>
      <Form.Text className="text-muted">
        {Registerar_UserName_Error}
        </Form.Text>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Industry Email</Form.Label>
      <Form.Control type="email" placeholder="Industry Email"
      value={Registerar_Email}
      onChange={e=>{setRegisterar_Email(e.target.value)
        let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(regex.test(Registerar_Email))
        setRegisterar_Email_Error(ErrorCodes[0]);
        else
        setRegisterar_Email_Error(ErrorCodes[4]);
      }}/>
      <Form.Text className="text-muted">
        {Registerar_Email_Error}
        </Form.Text>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Organisation Name</Form.Label>
      <Form.Control type="text" placeholder="Organisation Name"
      value={Organisation_Name}
      onChange={e=>{setOrganisation_Name(e.target.value);
        if(Organisation_Name.length===0)
        setOrganisation_Name_Error(ErrorCodes[1]);
        else
        setOrganisation_Name_Error(ErrorCodes[0]);
        }}/>
      <Form.Text className="text-muted">
        {Organisation_Name_Error}
        </Form.Text>
    </Form.Group>
    <Form.Group controlId="formBasicEmail">
    <Form.Label>Industry Email</Form.Label>
    <Form.Control type="email" placeholder="Industry Email"
    value={Organisation_Email}
    onChange={e=>{
      setOrganisation_Email(e.target.value);
      let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(regex.test(Organisation_Email))
        setOrganisation_Email_Error(ErrorCodes[0]);
        else
        setOrganisation_Email_Error(ErrorCodes[4]);

    }}/>
    <Form.Text className="text-muted">
        {Organisation_Email_Error}
        </Form.Text>
    </Form.Group>
    <Form.Group controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Enter Password"
    value={Password}
    onChange={e=>setPassword(e.target.value)}/>
    </Form.Group>
   <Form.Group controlId="formBasicPassword">
    <Form.Label>Re-enter Password</Form.Label>
    <Form.Control type="password" placeholder="Enter Password"
    value={ReenterPassword}
    onChange={e=>{
      setReenterPassword(e.target.value);
      if(ReenterPassword!=Password)
      {
        setReenterPassword_Error(ErrorCodes[6]);
      }
      else
      setReenterPassword_Error(ErrorCodes[0]);
    }}/>
    <Form.Text className="text-muted">
        {ReenterPassword_Error}
        </Form.Text>
    </Form.Group>
    <Button variant="primary" className="Submit-Button" type="submit"
    onClick={async(event)=>{
      event.preventDefault();
      const JSONString = {Device_ID,Registerar_UserName,Registerar_Email,Organisation_Name,Organisation_Email,Password,ReenterPassword};
      console.log(JSON.stringify(JSONString));
      const response = await fetch('http://localhost:5000/register',{
        method: 'POST',
        headers:{
          'Content-Type':'application/json'
        },
        body:JSON.stringify(JSONString)
      });
      if(response.ok){
        console.log("Response recieved");
      }
    }}>
      Register
    </Button>
  </Form>
}

这是它的外观：

出于某种原因，我不知道，但行业电子邮件和密码字段总是预先填写的。我试图做很多事情，但无法理解为什么当其他字段为空时默认情况下会发生这种情况。

我是否添加了一些preventDefault功能来避免默认操作？我知道有一些非常规的方法可以阻止这种情况的发生，但我想知道核心概念，为什么在我没有做过任何此类事情的情况下甚至会发生这种情况。

标签： reactjs

reactjs - 默认值未在反应中清除

问题描述

解决方案

推荐阅读