什么都没有显示在反应的多形式

问题描述

所以我试图在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))
        },setStep]
      );

      const onSubmitClick = React.useCallback(
        (event) => {
          event.preventDefault();
          window.open("/successfull","_self")
        },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>
    );
  
}

它仍然显示：

知道为什么它不显示任何东西吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）