使用 React & Bootstrap 有條件地渲染空 div 或錯誤

Question

我正在設置一個注冊表單，如果用戶出錯，它會在輸入字段下方顯示錯誤。 按照我現在設置的方式，當用戶嘗試提交他們的信息時，表單將添加一個帶有以下錯誤的 div。 我的問題是，當出現錯誤時，它會添加 div 並弄亂表單的布局，因為它必須移動所有內容以為每個錯誤騰出空間。 如果沒有任何錯誤，有沒有辦法在那里只有一個空的 div，這樣它就不會在有一個時弄亂布局？ 就像，而不是字段之間的間距有余量，它是錯誤的空 div。

import React, { Component } from "react";
import axios from "axios";
import classnames from "classnames";

import "./Signup.css";

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
      email: "",
      password: "",
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  onSubmit(e) {
    e.preventDefault();

    const newUser = {
      username: this.state.username,
      email: this.state.email,
      password: this.state.password
    };

    axios
      .post("api/users/register", newUser)
      .then(res => console.log(res.data))
      .catch(err => this.setState({ errors: err.response.data }));
  }

  render() {
    const { errors } = this.state;

    return (
      <div className="signup-form">
        <form noValidate onSubmit={this.onSubmit}>
          <h2>Sign Up</h2>
          <p>It's free and only takes a minute.</p>
          <hr />
          <div className="form-group">
            <label>Username</label>
            <input
              type="text"
              name="username"
              className={classnames("form-control form-control-md", {
                "is-invalid": errors.username
              })}
              value={this.state.username}
              onChange={this.onChange}
            />
            {errors.username && (
              <div className="invalid-feedback">{errors.username}</div>
            )}
          </div>
          <div className="form-group">
            <label>Email</label>
            <input
              type="text"
              name="email"
              className={classnames("form-control form-control-md", {
                "is-invalid": errors.email
              })}
              value={this.state.email}
              onChange={this.onChange}
            />
            {errors.email && (
              <div className="invalid-feedback">{errors.email}</div>
            )}
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="text"
              name="password"
              className={classnames("form-control form-control-md", {
                "is-invalid": errors.password
              })}
              value={this.state.password}
              onChange={this.onChange}
            />
            {errors.password && (
              <div className="invalid-feedback">{errors.password}</div>
            )}
          </div>
          <div className="form-group">
            <button type="submit" className="btn btn-primary btn-block btn-lg">
              Sign Up
            </button>
          </div>
          <p className="small text-center">
            By clicking the Sign Up button, you agree to our <br />
            <a href="#">Terms &amp; Conditions</a>, and{" "}
            <a href="#">Privacy Policy</a>
          </p>
          <div className="text-center">
            Already have an account? <a href="#">Login here</a>
          </div>
        </form>
      </div>
    );
  }
}

export default Signup;

Answer 1

是的，您可以使用 CSS 的visibility:hidden屬性。

 <div style={{ visibility: error.email? 'visible': 'hidden'}}></div>

由於可見性總是占用空間，在這兩種情況下，它既可見又隱藏。 所以它不會弄亂布局。