Question

我创建了一个多步骤表单，以便能够轻松顺利地进行入职。

我无法正确显示按钮和输入/标签

我希望获得标签并输入左对齐，并且上一行和下一行按钮显示在同一行上，但其中之一为左，右边为一个。另外，我到达了最新表单，不再显示“下一步”按钮，而是显示提交。

代码有效，只是显示安排不好。

这是什么样子：

我正在寻找类似这样的东西：

只有背面和下一个未正确显示在此图像上，它应该更靠近输入。

否则，这正是我所寻找的然后输入标签（始终在标签下方），然后输入和标签下方的按钮。

代码如下：

MasterForm：

import React from 'react';
import ClassCreationFormStep1 from './ClassCreationFormStep1'
import ClassCreationFormStep2 from './ClassCreationFormStep2'
import ClassCreationFormStep3 from './ClassCreationFormStep3'
import ClassCreationFormStep4 from './ClassCreationFormStep4'
import ClassCreationFormStep5 from './ClassCreationFormStep5'
import ClassCreationFormStep6 from './ClassCreationFormStep6'
import ClassCreationFormStep7 from './ClassCreationFormStep7'
import ClassCreationFormStep8 from './ClassCreationFormStep8'
import ClassCreationFormStep9 from './ClassCreationFormStep9'
import ClassCreationFormStep10 from './ClassCreationFormStep10'
import ClassCreationFormStep11 from './ClassCreationFormStep11'
import ClassCreationFormStep12 from './ClassCreationFormStep12'
import ClassCreationFormStep13 from './ClassCreationFormStep13'


import './CreateClassOnBoardingForm.css';

class CreateClassOnBoardingForm extends React.Component {

    constructor(props) {
        super(props)
        // Set the initial input values
        this.state = {
          currentStep: 1, // Default is Step 1
          classTeacherName: '',
          classProfilePic: '',
          classEmail: '', 
          className: '',
          classAttendeesWillLearn: '',
          classMaxClass: '',
          classWhatToBring: '',
          classWillBe: '',
          classLocation: '',
          classCost: '',
          typeOfClass: '',
          classExtra: '',
          classPics: '',
        }
        // Bind the submission to handleChange() 
        this.handleChange = this.handleChange.bind(this)
        this._next = this._next.bind(this)
        this._prev = this._prev.bind(this)
      }

      _next() {
        let currentStep = this.state.currentStep
        // If the current step is 1 or 2, then add one on "next" button click
        currentStep = currentStep >= 12? 13: currentStep + 1
        this.setState({
          currentStep: currentStep
        })
      }

      _prev() {
        let currentStep = this.state.currentStep
        // If the current step is 2 or 3, then subtract one on "previous" button click
        currentStep = currentStep <= 1? 1: currentStep - 1
        this.setState({
          currentStep: currentStep
        })
      }

      // Use the submitted data to set the state
      handleChange(event) {
        const {name, value} = event.target
        this.setState({
          [name]: value
        })    
      }

      // Trigger an alert on form submission
      handleSubmit = (event) => {
        event.preventDefault()
        const { classTeacherName, classProfilePic, classEmail, 
          className, classAttendeesWillLearn,classMaxClass, classWhatToBring,
          classWillBe, classLocation, classCost, typeOfClass, classExtra, classPics  } = this.state
        alert(`Your registration detail: \n 
        classTeacherName: ${classTeacherName} \n 
        classProfilePic: ${classProfilePic} \n
        classEmail: ${classEmail} \n
        className: ${className} \n
        classAttendeesWillLearn: ${classAttendeesWillLearn} \n
        classMaxClass: ${classMaxClass} \n 
        classWhatToBring: ${classWhatToBring} \n
        classWillBe: ${classWillBe} \n
        classLocation: ${classLocation} \n
        classCost: ${classCost} \n
        typeOfClass: ${typeOfClass} \n
        classExtra: ${classExtra} \n
        classPics: ${classPics} \n
        `)

        window.open("/successfull", "_self") //to open new page

      }

      get previousButton(){
        let currentStep = this.state.currentStep;
        // If the current step is not 1, then render the "previous" button
        if(currentStep !==1){
          return (
            <button 
              className="blue-button" 
              type="button" onClick={this._prev}>
            Previous
            </button>
          )
        }
        // ...else return nothing
        return null;
      }

      get nextButton(){
        let currentStep = this.state.currentStep;
        if(currentStep <13){
          return (
            <button 
            className="blue-button" 
            type="button" onClick={this._next}>
            Next
            </button>        
          )
        }
        // ...else render nothing
        return null;
      }

      render() {    
        return (
          <React.Fragment>
          <p>Step {this.state.currentStep} </p> 

          <form onSubmit={this.handleSubmit}>
            <ClassCreationFormStep1 
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}
              classTeacherName={this.state.classTeacherName}
            />
            <ClassCreationFormStep2 
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}
              classProfilePic={this.state.classProfilePic}
            />
            ....
            <ClassCreationFormStep13
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}
              classPics={this.state.classPics}
            />      

            {this.previousButton}
            {this.nextButton}
          </form>
          </React.Fragment>
        )
        }
}

export default CreateClassOnBoardingForm;

下面的Css用于主机和子机

.blue-button {
    border-radius: 21px; 
    background-color: #14cff0; 
    border-color: #14cff0;
    font-family: Source Sans Pro;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #ffffffff;
    box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-right: 20px;
}

.label-txt {
    font-family: Source Sans Pro;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.77;
    letter-spacing: -0.6px;
    text-align: left;
    color: #333333;
}

.form-control-village {
    font-family: Source Sans Pro;
    font-size: 16px; 
    line-height: 1.6;
    text-align: left;
    color: #616161;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background-color: #ffffff;
    border-bottom: 3px solid #ff7255;
    border-top: 0px none;
    border-left: 0px none;
    border-right: 0px none;
}

这是子窗体：

第一个：

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

class ClassCreationFormStep1 extends React.Component {
    render() {
      if (this.props.currentStep !== 1) { // Prop: The current step
        return null
      }
      return(
        <div className="form-group">
          <label className="label-txt" htmlFor="classTeacherName">{TextContents.FormClassTeacherName}</label>
          <input
            className="form-control-village"
            id="classTeacherName"
            name="classTeacherName"
            type="text"
            placeholder=""
            value={this.props.classTeacherName} // Prop: The email input data
            onChange={this.props.handleChange} // Prop: Puts data into state
          />
        </div>
      )
    }
  }

  export default ClassCreationFormStep1

第二个：

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

class ClassCreationFormStep2 extends React.Component {
    render() {
      if (this.props.currentStep !== 2) { // Prop: The current step
        return null
      }
      return(
          <div className="form-group">
            <label  className="label-txt" htmlFor="classProfilePic">{TextContents.FormClassProfilePic}</label>
            <input
              className="form-control-village"
              id="classProfilePic"
              name="classProfilePic"
              type="file"
              value={this.props.classProfilePic} // Prop: The email input data
              onChange={this.props.handleChange} // Prop: Puts data into state
            />
          </div>
      )
    }
  }

  export default ClassCreationFormStep2

和最新的一个，当提交出现时

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

import './CreateClassOnBoardingForm.css';

class ClassCreationFormStep13 extends React.Component {
    render() {
      if (this.props.currentStep !== 13) { // Prop: The current step
        return null
      }
      return(
        <React.Fragment>
          <div className="form-group">
            <label className="label-txt" htmlFor="classPics">{TextContents.FormClassPics}</label>
            <input
              className="form-control-village"
              id="classPics"
              name="classPics"
              type="file"
              multiple
              value={this.props.classPics} // Prop: The email input data
              onChange={this.props.handleChange} // Prop: Puts data into state
            />
          </div>
          <button 
              className="blue-button" 
              type="submit">
            {TextContents.SubmitBtn}
            </button>
        </React.Fragment>

      )
    }
  }

  export default ClassCreationFormStep13

任何想法都可以使它像我发布的最新图片一样好

=====

我正在寻找类似这样的东西：

Answer 1

如果要将它们放置在左下和右下，则需要设置高度和position: relative


<div className="container>
   <button className="backButton>Back</button>
   <button className="nextButton>Next</button>
</div>

.container {
  height: 200px; // example
  width: 200px;
  position: relative;
}

.backButton {
   position: absolute;
   bottom: 0;
   left: 0;
}

.nextButton {
   position: absolute;
   bottom: 0;
   right: 0;
}

多步骤表格排列显示

1 个答案: