使用 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>

由于可见性总是占用空间，在这两种情况下，它既可见又隐藏。 所以它不会弄乱布局。