使用 react-bootstrap 將空間添加到表單標簽的開頭？

Question

我正在嘗試實現一個以頁面為中心的表單，並具有用於電子郵件和密碼的標准登錄輸入。 密碼標簽的實現方式與電子郵件輸入相同，但是，電子郵件標簽前面加上了一個 ' ' 空格：

反應組件代碼：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import {useNavigate} from "react-router-dom";
import {delay} from "../util/Util";
import {Alert} from "reactstrap";
import AuthService from "../services/AuthService";
import "../css/LoginForm.css";
import Logo400 from "../images/logo400.png";

export default function LoginForm() {

  const [validated, setValidated] = useState(false);
  const navigate = useNavigate();
  const [alert, setAlert] = useState(false);
  const [alertMessage, setAlertMessage] = useState('');
  const [alertSeverity, setAlertSeverity] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);

    let emailInputValue = event.target.querySelector('.email').value;
    let passwordInputValue = event.target.querySelector('.password').value;

    if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Email")) {
                    console.log("Validate input if failure email triggered")
                    setAlertMessage("Login failed, please enter a valid email, emails must be between 4 and 50 characters.");
                    setAlertSeverity("error");
                    setAlert(true);
                    return;
        }

        if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Password")) {
                    console.log("Validate input if failure password triggered")
                    setAlertMessage("Login failed, please enter a valid password, passwords must be between 6 and 12 characters.");
                    setAlertSeverity("error");
                    setAlert(true);
                    return;
        }

    const payload = {
                "email": emailInputValue,
                "password": passwordInputValue,
            };

    AuthService.loginUser(payload).then(response => response.json())
        .then(async data => {
            console.log(data);
                if (data.userId && data.accessToken) {
                   setAlertMessage("Login successful");
                   setAlertSeverity("success");
                   setAlert(true);
                   const authenticatedUser = {
                    "userId": data.userId,
                    "accessToken": data.accessToken,
                    }

                    localStorage.clear();
                    localStorage.setItem("authenticatedUser", JSON.stringify(authenticatedUser));

                    await delay(1000);
                    navigate("/dashboard");
                }
            }
        );

    setAlertMessage("Login failed, probably because no user exists with these credentials.");
    setAlertSeverity("error");
    setAlert(true);

    localStorage.clear();
  };

  const validateInput = (email, password) => {
          if (email.length > 50) {
              return "Failure: Email entered is too long."
          }
          if (email.length < 4) {
              return "Failure: Email is invalid."
          }
          if (password.length > 12) {
              return "Failure: Password is too long."
          }
          if (password.length < 6) {
              return "Failure: Password is too short."
          } else {
              return "Success."
          }
      }

  return (
  <>
    <div id="loginFormContainer">
       {alert ? <Alert severity={alertSeverity} role="alert">{alertMessage}</Alert> : <></> }
    </div>
    <div id="centerLogin">

    <div id="loginForm">
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Row className="mb-3">
      </Row>
      <Row className="mb-3">
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>Email</Form.Label>
          <Form.Control
            required
            type="email"
            placeholder="Email"
            className="emailLoginInput"
          />
        </Form.Group>
        </Row>
        <Row className="mb-3">
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Password</Form.Label>
          <Form.Control
            required
            type="password"
            placeholder="Password"
            className="passwordLoginInput"
          />
        </Form.Group>
      </Row>
      <Button type="submit" id="loginSubmit">Submit</Button>
    </Form>
    </div>
    </div>
    </>
  );
}

登錄表單.css

#centerLogin {
  display: flex;
  justify-content: center;
  text-align: center;
}

#loginLogo {
  width: 20vw;
  height: 40vh;
  position: relative;
  left: 0;
  padding-top: 40px;
}

#loginForm {
  width: 30vw;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
  background-color: white;
  margin-top: 10vh;
  border-radius: 10px;
  color: black;
}

.passwordLoginInput, .emailLoginInput, #loginSubmit {
  width: 20vw;
}

我試過從輸入中刪除任何邊距和填充，但它沒有用。

任何幫助將不勝感激，謝謝

Answer 1

我已經更新了你的代碼。

反應組件代碼：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import {useNavigate} from "react-router-dom";
import {delay} from "../util/Util";
import {Alert} from "reactstrap";
import AuthService from "../services/AuthService";
import "../css/LoginForm.css";
import Logo400 from "../images/logo400.png";

export default function LoginForm() {

   const [validated, setValidated] = useState(false);
   const navigate = useNavigate();
   const [alert, setAlert] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
   const [alertSeverity, setAlertSeverity] = useState('');

const handleSubmit = (event) => {
event.preventDefault();

const form = event.currentTarget;
if (form.checkValidity() === false) {
  event.preventDefault();
  event.stopPropagation();
}

setValidated(true);

let emailInputValue = event.target.querySelector('.email').value;
let passwordInputValue = event.target.querySelector('.password').value;

if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Email")) {
                console.log("Validate input if failure email triggered")
                setAlertMessage("Login failed, please enter a valid email, emails must be between 4 and 50 characters.");
                setAlertSeverity("error");
                setAlert(true);
                return;
    }

    if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Password")) {
                console.log("Validate input if failure password triggered")
                setAlertMessage("Login failed, please enter a valid password, passwords must be between 6 and 12 characters.");
                setAlertSeverity("error");
                setAlert(true);
                return;
    }

const payload = {
            "email": emailInputValue,
            "password": passwordInputValue,
        };

AuthService.loginUser(payload).then(response => response.json())
    .then(async data => {
        console.log(data);
            if (data.userId && data.accessToken) {
               setAlertMessage("Login successful");
               setAlertSeverity("success");
               setAlert(true);
               const authenticatedUser = {
                "userId": data.userId,
                "accessToken": data.accessToken,
                }

                localStorage.clear();
                localStorage.setItem("authenticatedUser", JSON.stringify(authenticatedUser));

                await delay(1000);
                navigate("/dashboard");
            }
        }
    );

setAlertMessage("Login failed, probably because no user exists with these credentials.");
setAlertSeverity("error");
setAlert(true);

localStorage.clear();
};

const validateInput = (email, password) => {
      if (email.length > 50) {
          return "Failure: Email entered is too long."
      }
      if (email.length < 4) {
          return "Failure: Email is invalid."
      }
      if (password.length > 12) {
          return "Failure: Password is too long."
      }
      if (password.length < 6) {
          return "Failure: Password is too short."
      } else {
          return "Success."
      }
  }

return (
<>
<div id="loginFormContainer">
   {alert ? <Alert severity={alertSeverity} role="alert">{alertMessage}</Alert> : <></> }
</div>
<div id="centerLogin">

<div id="loginForm">
<Form noValidate validated={validated} onSubmit={handleSubmit}>
  <Row className="mb-3">
  </Row>
  <Row className="mb-3">
    <Form.Group as={Col} md="12" controlId="validationCustom01">
      <Form.Label>Email</Form.Label>
      <Form.Control
        required
        type="email"
        placeholder="Email"
        className="emailLoginInput"
      />
    </Form.Group>
    </Row>
    <Row className="mb-3">
    <Form.Group as={Col} md="12" controlId="validationCustom02">
      <Form.Label>Password</Form.Label>
      <Form.Control
        required
        type="password"
        placeholder="Password"
        className="passwordLoginInput"
      />
    </Form.Group>
  </Row>
  <Button type="submit" id="loginSubmit">Submit</Button>
</Form>
</div>
</div>
</>
);
}

登錄表單.css

#centerLogin {
 display: flex;
 justify-content: center;
}

#loginLogo {
 width: 20vw;
 height: 40vh;
 position: relative;
 left: 0;
 padding-top: 40px;
}

#loginForm {
 width: 30vw;
 height: 20vh;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 80vh;
 background-color: white;
 margin-top: 10vh;
 border-radius: 10px;
 color: black;
}

.passwordLoginInput, .emailLoginInput, #loginSubmit {
  width: 20vw;
}