react中多表单不显示任何内容

Question

所以我尝试在 React 中构建一个多步骤表单，我完成的第一个版本是 React.Component 上的一堆表单和条件测试的完整列表，以确定要显示哪个。我已经决定删除它并制作一个更好更干净的代码，但现在什么都没有显示。

这里是处理整体多步的主要代码：

import React from 'react';
import {Row, Col} from 'react-bootstrap'
import {ClassCreationFormName} from './ClassCreationFormName'
import ClassCreationFormProfilePic from './ClassCreationFormProfilePic'
import ClassCreationFormEmail from './ClassCreationFormEmail'
import ClassCreationFormClass from './ClassCreationFormClass'
import ClassCreationFormWillLearn from './ClassCreationFormWillLearn'
import ClassCreationFormMaxStudent from './ClassCreationFormMaxStudent'
import ClassCreationFormToBring from './ClassCreationFormToBring'
import ClassCreationFormSchedule from './ClassCreationFormSchedule'
import ClassCreationFormLocation from './ClassCreationFormLocation'
import ClassCreationFormCost from './ClassCreationFormCost'
import ClassCreationFormTags from './ClassCreationFormTags'
import ClassCreationFormAddTxt from './ClassCreationFormAddTxt'
import ClassCreationFormStep13 from './ClassCreationFormStep13'


import './CreateClassOnBoardingForm.css';

const stepPages = [
  ClassCreationFormName,
  /*ClassCreationFormProfilePic,
  ClassCreationFormEmail,
  ClassCreationFormClass,
  ClassCreationFormWillLearn,
  ClassCreationFormMaxStudent,
  ClassCreationFormToBring,
  ClassCreationFormSchedule,
  ClassCreationFormLocation,
  ClassCreationFormCost,
  ClassCreationFormTags,
  ClassCreationFormAddTxt,
  ClassCreationFormStep13*/
];

const CreateClassOnBoardingForm = () => {

      const [step, setStep] = React.useState(0);

      const onPrevClick = React.useCallback(
        (event) => {
            event.preventDefault();
            setStep(() => Math.max(step - 1, 0));
        },
        [step, setStep]
      );

      const onNextClick = React.useCallback(
        (event) => {
          event.preventDefault();
          setStep(() => Math.min(step+1, stepPages.length-1))
        },
        [step, setStep]
      );

      const onSubmitClick = React.useCallback(
        (event) => {
          event.preventDefault();
          window.open("/successfull", "_self")
        },
        [step, setStep]
      );


      return (
        <div className="form-container">
          <Row className="row-container">
            <Col xs sm="1" className="form-arrow-elt-prev">
              {
                  step !== 0 ? (
                    <i class="fas fa-arrow-left fa-2x" onClick={onPrevClick} style={{color: "#616161"}}></i>
                  ) : (
                    <i class="fas fa-user fa-2x" style={{color: "#616161"}} size={32}></i>
                  )
              }
            </Col>
            <Col>{stepPages[step]}</Col>
            <Col xs sm="1" className="form-arrow-elt-next">
              {
              step !== stepPages.length-1 ? (
                    <i class="fas fa-arrow-right fa-2x" onClick={onNextClick} style={{color: "#616161"}}></i>
                  ) : (
                    <i class="fas fa-arrow-right fa-2x" onClick={onSubmitClick} style={{color: "#616161"}}></i>
                  )
              }
            </Col>
          </Row> 
        </div> 
      )
}

export default CreateClassOnBoardingForm;

我特意注释了列表中的所有元素 stepPages 以使其在第一个元素中起作用。

ClassCreationFormName定义如下：

import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';

export const ClassCreationFormName = () => {

  const [isFocused, setIsFocused] = React.useState('false')

  const handleFocus = () =>  setIsFocused(() => 'true')
  const handleBlur = () => setIsFocused(() => 'false')


  //const { label, ...props } = this.props;
  const labelStyle = {
    position: 'absolute',
    left: 20,
    top: !isFocused ? 50 : 20,
    fontSize: !isFocused ? 28 : 20,
    color: !isFocused ? '#616161' : '#ff7255',
    fontFamily: "Source Sans Pro",
    fontWeight: 'bold',
  };

  return (
      <div>
        <label style={labelStyle}>
          {TextContents.FormClassTeacherName}
        </label>
        <input className="form-element-input"
          //{...props}
          id="classTeacherName"
          name="classTeacherName"
          onFocus={handleFocus}
          onBlur={handleBlur}
          //onChange={this.props.handleChange}
        />
      </div>
    );
  
}

它仍然显示:

知道为什么它不显示任何内容吗？

Answer 1

尝试像这样创建一个数组：

const stepPages = [
       <ClassCreationFormName />,
       // etc.
];

react中多表单不显示任何内容

Nothing is displayed in the multi-form in react

javascript

reactjs

react-component

react-functional-component