Я создал многоэтапную форму, чтобы иметь возможность создать плавную и легкую адаптацию.
Я не могу правильно отобразить кнопку и ввод / метку
Я хотите, чтобы метка и ввод выровнялись по левому краю, а кнопки предыдущая и следующая отображались в одной строке, но одна из левой и одна справа. Также я дохожу до последней формы, кнопка «следующий» больше не отображается, и я показываю отправку.
Код работает, это просто отображение, которое не очень хорошо.
вот как это выглядит так:
, и я больше ищу что-то вроде этого:
На этом изображении не отображаются должным образом только задняя часть и Далее, это должен быть ближе к вводу.
В противном случае это именно то, что я ищу. Надпись, затем ввод (всегда под ярлыком), а затем кнопки под вводом и ярлыком.
Вот code:
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;
}
, а вот дочерняя форма:
1-й:
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
Любая идея, как сделать это приятно, как последнее изображение, да мы опубликовали
=====
Я ищу что-то вроде этого:
