文本未显示在输入标签元素中

Question

So I have a started to create a multi step form very simple, the goal is really to keep it clean... but I am not displaying anything and when I click on the next arrow, nothing happens.

First I do not understand why it's not displaying at least the text.

here is the code:

import React from 'react'
import './ClassCreationForm.css'

class ClassCreationForm extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {
            questions: [
                { phrase: 'Enter Your First Name' },
                { phrase: 'Enter Your Last Name' },
                { phrase: 'Enter Your Email', pattern: /\S+@\S+\.\S+/ },
                { phrase: 'Create A Password', type: 'password' }
              ],
              shakeTime: 100,
              switchTime: 200,
              position: 0,
              currentAnswer: ''
        };
    }

  handleKeyUp = (event) => {
    const { value, keyCode } = event;
    this.setState({
      currentAnswer: value
    });
    if (keyCode === 13) {
      this.validate();
    }
  }

  handleNextClick = (event) => {
    this.validate();
  }

  validate = () => {
    console.log(this.state.currentAnswer);
  }

  render() {
    const { questions, position } = this.state;
    const { phrase, type, pattern } = questions[position];
 
    return (
      <div id="container">
        <h1 className="logo">Class ClassCreationForm</h1>
        <div id="form-box">
          <i id="prev-btn" className="fas fa-arrow-left"></i>
          <i 
            id="next-btn" 
            className="fas fa-arrow-right"
            onClick={this.handleNextClick}
          ></i>
          <div id="input-group">
            <input 
              id="input-field" 
              type={type || 'text'}
              onKeyUp={this.handleKeyUp}
              required 
            />
            <label id="input-label">
              { phrase }
            </label>
            <div id="input-progress"></div>
          </div>
          <div id="progress-bar"></div>
        </div>
      </div>
    )
  }

}

export default ClassCreationForm

and the css associated.

h1.logo {
  color: #333333;
  font-family: 'Fredoka One', cursive;;
  font-size: 4em; }

h1.end {
  position: relative;
  color: #fff;
  opacity: 0;
  transition: 0.8s ease-in-out; }

#container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center; }

#form-box {
  background: #fff;
  position: relative;
  width: 600px;
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.03), 0 6px 10px 5px rgba(0, 0, 0, 0.03), 0 8px 10px -5px rgba(0, 0, 0, 0.03);
 }

#form-box.close {
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: 0.8s ease-in-out;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0); }

#next-btn {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 40px;
  color: #dbdada; 
  float: right;
  cursor: pointer;
  z-index: 2; }
  #next-btn:hover {
    color: #ff7255; }

#prev-btn {
  position: absolute;
  font-size: 18px;
  left: 30px;
  top: 12px;
  z-index: 2;
  color: #dbdada;
  float: right;
  cursor: pointer; }
  #prev-btn:hover {
    color: #ff7255; }

#input-group {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin: 10px 60px 10px 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; }
  #input-group input {
    position: relative;
    width: 100%;
    border: none;
    font-size: 20px;
    font-weight: normal;
    outline: 0;
    background: transparent;
    box-shadow: none; }
  #input-group #input-label {
    position: absolute;
    pointer-events: none;
    top: 32px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: red;
    transition: 0.2s ease-in-out; }
  #input-group input:valid + #input-label {
    top: 6px;
    left: 42px;
    margin-left: 0 !important;
    font-size: 11px;
    font-weight: normal;
    color: #ff7255; }

#input-progress {
  border-bottom: 3px solid #ff7255;
  width: 0;
  transition: width 0.6s ease-in-out; }

#progress-bar {
  position: absolute;
  background: #fcae9e;
  height: 10px;
  width: 0;
  transition: width 0.5s ease-in-out; }

.close #next-btn,
.close #prev-btn {
  color: #ff7255; }

.error #input-progress {
  border-color: #ff7255; }

.error #next-btn {
  color: #ff7255; }

@media (max-width: 600px) {
  #form-box {
    width: 80%; } }

it looks like this

Answer 1

Your input group has an opacity of 0 which is hiding your label and input. Based on the code that you provided you don't have anything that triggers the opacity to be greater than 0. Here I just set it to 1 to see where the input and label is:

#input-group {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin: 10px 60px 10px 10px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

https://jsfiddle.net/9nLhsuyo/1/