问题描述
我创建了一个多步骤表单，但某些值未正确保存。这样做的方式是，我有一个名为main的{{1}}文件，在此文件中，我正在处理适当形式的负载，保存值...
CreateClassOnBoardingForm
CreateClassOnBoardingForm我删除了一些可以正常工作的类，只是将class CreateClassOnBoardingForm extends React.Component {
constructor(){
super()
this.state = {
step: 0,teacherName: '',profilePic: '',classDays: [],//
classFrequency: '',//
classtags: [],classFiles: []
}
this.handleChange = this.handleChange.bind(this)
this.onNextClick = this.onNextClick.bind(this)
this.onPrevClick = this.onPrevClick.bind(this)
}
onPrevClick = (event) => {}
onNextClick = (event) => {}
onSubmitClick = (event) => {
event.preventDefault();
const { teacherName,profilePic,classDays,classFrequency,classtags,classFiles} = this.state
alert(`Your registration detail: \n
teacherName: ${teacherName} \n
profilePic: ${profilePic} \n
classDays: ${classDays} \n
classFrequency: ${classFrequency} \n
classtags: ${classtags} \n
classFiles: ${classFiles} \n`)
window.open("/successfull","_self")
}
handleChange(event) {
const {name,value} = event.target
this.setState({
[name]: value
})
}
render(){
const stepPages = [
<ClassCreationFormName handleChange={this.handleChange} teacherName={this.state.teacherName}/>,<ClassCreationFormProfilePic handleChange={this.handleChange} profilePic={this.state.profilePic}/>,<ClassCreationFormSchedule handleChange={this.handleChange} classFrequency={this.state.classFrequency} classstartTime={this.state.classstartTime} classstartDate={this.state.classstartDate}/>,<ClassCreationFormTags handleChange={this.handleChange} classtags={this.state.classtags}/>,<ClassCreationFormPics handleChange={this.handleChange} classFiles={this.state.classFiles}/>
];
const {step} = this.state;
const maxPages = stepPages.length;
return (
<div className="form-container">
<Row className="row-container">
...
</Col>
<Col>{stepPages[step]}</Col>
<Col xs sm="1" className="form-arrow-elt-next">
...
</Col>
</Row>
<ProgressBar max={maxPages} Now={step+1} />
</div>
)
}
}
export default CreateClassOnBoardingForm;
作为实现的示例。
ClassCreationFormName
ClassCreationFormName这对于名称或电子邮件，文本区域，日期等任何其他字段都适用。...使用return (
<div>
<label style={labelStyle}>
{TextContents.FormClassteacherName}
</label>
<input className="form-element-input"
id="teacherName"
name="teacherName"
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onChange={this.props.handleChange}
value={this.props.teacherName}
/>
</div>
);
类型或file类型或选择时，我开始遇到问题。 / p>
例如，我有一个屏幕，用户可以在其中选择不同的标签，它可以是一个或多个。
班级为multiple file：
ClassCreationFormTags其中return (
<div>
<label style={labelStyle}>
{TextContents.FormClassCategories}
</label>
{Constants.categoryList.map((e,key) => {
return <CheckBoxButton text={e.name} />
})}
</div>
);
的定义如下：
CheckBoxButton我想拥有的是 render(){
return(
<div id="ck-button">
<label>
<input type="checkBox" value="1" hidden/><span>{this.props.text}</span>
</label>
</div>
)
}
，其中包含所有选定标签的列表，但到目前为止，它什么都没有。
谢谢 问候
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）