Javascript 如何在“上一页/上一页”中保存状态（数据）；按钮点击
我是reactjs新手，我正在处理向导表单，我想保存用户数据。例如，当用户在其字段中输入数据并单击“下一步”按钮时，如果用户单击“上一步”按钮编辑数据，我希望不会丢失用户数据。我不知道这是怎么可能的。你能帮帮我吗？我还将分享我的向导表单代码，我将在其中控制进一步的4个步骤 代码Javascript 如何在“上一页/上一页”中保存状态（数据）；按钮点击,javascript,reactjs,ant-design-pro,Javascript,Reactjs,Ant Design Pro,我是reactjs新手，我正在处理向导表单，我想保存用户数据。例如，当用户在其字段中输入数据并单击“下一步”按钮时，如果用户单击“上一步”按钮编辑数据，我希望不会丢失用户数据。我不知道这是怎么可能的。你能帮帮我吗？我还将分享我的向导表单代码，我将在其中控制进一步的4个步骤 代码 import React from 'react'; import 'antd/dist/antd.css'; import './WizarStyle.css'; import styled from 'styled-
import React from 'react';
import 'antd/dist/antd.css';
import './WizarStyle.css';
import styled from 'styled-components';
import { Steps, Form, Button, Card } from 'antd';
import RegisterStepOne from '../RegisterStepOne/RegisterStepOne';
import RegisterStepTwo from '../RegisterStepTwo/RegisterStepTwo';
import RegisterStepThree from '../RegisterStepThree/RegisterStepThree';
import RegisterStepFour from '../RegisterStepFour/RegisterStepFour';
import Success from '../Successful/Success';
const Step = Steps.Step;
const GeneralText = styled.div`
color: red;
font-size: 26px;
font-weight: 600;
text-align: center;
padding-bottom: 30px;
font-family: Lato;
margin-top: 50px;
color: #012653;
`;
const ButtonWrapper = styled.div`
text-align: center;
margin-top: 26px;
`;
class Wizard extends React.Component {
constructor(props) {
super(props);
// this.modifier = null;
this.state = {
current: 0,
// user: null,
};
}
steps = [
{
title: 'General Information',
content: (
<RegisterStepOne
getFieldDecorator={this.props.form.getFieldDecorator}
/>
),
},
{
title: 'Upload Photo',
content: (
<RegisterStepTwo
getFieldDecorator={this.props.form.getFieldDecorator}
/>
),
},
{
title: 'Upload Resume',
content: (
<RegisterStepThree
getFieldDecorator={this.props.form.getFieldDecorator}
/>
),
},
{
title: 'Add Skills',
content: (
<RegisterStepFour
getFieldDecorator={this.props.form.getFieldDecorator}
/>
),
},
];
next() {
this.setState(prevState => ({ current: prevState.current + 1 }));
}
handlechanges=input=>e=>{
this.setState({[input]:e.target.value})
}
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
// this.setState({ user: [this.state.user, values] });
const userOject = {
profile: {
type: 'employee',
screen: 'Step0',
},
...values,
};
if (this.state.current === 0 && this.state.current <= 3) {
fetch('http://138.197.207.41:9000/api/auth/createuser', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
user: userOject,
}),
})
.then(response => response.json())
.then(user => {
if (user.error) {
console.warn(user);
} else if (user && user.user) {
console.warn(user);
localStorage.setItem('user', JSON.stringify(user.user));
const modifier = {
id: user.user._id,
type: user.user.profile.type,
profile: {
fullName: values.fullName,
position: values.lastPosition,
username: values.username,
location: values.lastPosition,
company: values.lastCompany,
password: values.password,
photo: '',
screen: 'Step1',
},
};
fetch(`http://138.197.207.41:9000/api/auth/user/update`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: user.user._id,
modifier,
}),
})
.then(response => response.json())
.then(res => {
if (res.error) {
console.warn(res);
} else {
console.warn(res);
this.next();
}
})
.done();
}
});
} else {
const user = JSON.parse(localStorage.getItem('user'));
fetch(`http://138.197.207.41:9000/api/auth/user/updateskills`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: user._id,
type: user.profile.type,
modifier: {
'profile.skills': values.skills,
},
}),
})
.then(response => response.json())
.then(res => {
if (res.error) {
console.warn(res);
} else {
console.warn(res);
// this.afterDone();
this.next();
}
})
.done();
}
}
});
};
// afterDone() {
// <Success getFieldDecorator={this.props.form.getFieldDecorator} />;
// }
prev() {
this.setState(prevState => ({ current: prevState.current - 1 }));
}
getStep = props => this.steps[this.state.current].content;
render() {
if (this.state.current <= 3) {
const { current } = this.state;
const { getFieldDecorator } = this.props.form;
return (
<Card style={{ borderRadius: 10 }}>
<Form onSubmit={this.handleSubmit}>
<GeneralText>{this.steps[current].title}</GeneralText>
<Steps current={current}>
{this.steps.map((item, index) => (
<Step key={index.toString()} small="small" />
))}
</Steps>
<div className="steps-content">
{this.getStep(getFieldDecorator)}
</div>
<div className="steps-action">
{' '}
<ButtonWrapper>
{current < this.steps.length - 1 && (
<Button
type="primary"
htmlType="submit"
style={{
background: '#ff9700',
fontWeight: 'bold',
border: 'none',
}}
>
Next
</Button>
)}
{current === this.steps.length - 1 && (
<Button
type="primary"
htmlType="submit"
style={{
background: '#ff9700',
fontWeight: 'bold',
border: 'none',
}}
>
Done
</Button>
)}
{current > 0 && (
<Button
className="preButton"
style={{ marginLeft: 8, border: '1px solid #ff9700' }}
onClick={() => this.prev()}
>
Previous
</Button>
)}
</ButtonWrapper>
</div>
</Form>
</Card>
);
} else {
return <Success />;
}
}
}
export default Form.create()(Wizard);
从“React”导入React；
导入“antd/dist/antd.css”；
导入“/WizarStyle.css”；
从“样式化组件”导入样式化；
从“antd”导入{步骤、表单、按钮、卡片}；
从“../RegisterStepOne/RegisterStepOne”导入RegisterStepOne；
从“../RegisterStepTwo/RegisterStepTwo”导入RegisterStepTwo；
从“../RegisterStepThree/RegisterStepThree”导入RegisterStepThree；
从“../RegisterStepFour/RegisterStepFour”导入RegisterStepFour；
从“../Successful/Success”导入成功；
常量步骤=步骤。步骤；
const GeneralText=styled.div`
颜色：红色；
字号：26px；
字号：600；
文本对齐：居中；
填充底部：30px；
字体系列：Lato；
边缘顶部：50px；
颜色：#012653；
`;
const ButtonWrapper=styled.div`
文本对齐：居中；
利润上限：26px；
`;
类向导扩展了React.Component{
建造师（道具）{
超级（道具）；
//this.modifier=null；
此.state={
电流：0，
//用户：null，
};
}
步骤=[
{
标题：“一般信息”，
内容：(
),
},
{
标题：“上传照片”，
内容：(
),
},
{
标题：“上传简历”，
内容：(
),
},
{
标题：“添加技能”，
内容：(
),
},
];
下一个（）{
this.setState（prevState=>（{current:prevState.current+1}））；
}
handlechanges=input=>e=>{
this.setState（{[input]：e.target.value}）
}
handleSubmit=e=>{
e、 预防默认值（）；
this.props.form.validateFieldsAndScroll（（错误，值）=>{
如果（！err）{
//this.setState（{user:[this.state.user，values]}）；
常量用户项目={
简介：{
类型：“雇员”，
屏幕：“步骤0”，
},
价值观
};
if（this.state.current==0&&this.state.current response.json（））
。然后（用户=>{
if（user.error）{
控制台。警告（用户）；
}else if（user&&user.user）{
控制台。警告（用户）；
setItem（'user'，JSON.stringify（user.user））；
常量修饰符={
id:user.user.\u id，
类型：user.user.profile.type，
简介：{
fullName:values.fullName，
位置：values.lastPosition，
用户名：values.username，
位置：values.lastPosition，
公司：values.lastCompany，
密码：values.password，
照片：''，
屏幕：“步骤1”，
},
};
取回(`http://138.197.207.41:9000/api/auth/user/update`, {
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
id:user.user.\u id，
修饰语，
}),
})
.then（response=>response.json（））
。然后（res=>{
if（res.error）{
控制台。警告（res）；
}否则{
控制台。警告（res）；
这个。下一个（）；
}
})
.完成（）；
}
});
}否则{
const user=JSON.parse（localStorage.getItem（'user'））；
取回(`http://138.197.207.41:9000/api/auth/user/updateskills`, {
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
id:user.\u id，
类型：user.profile.type，
修饰语：{
“profile.skills”：values.skills，
},
}),
})
.then（response=>response.json（））
。然后（res=>{
if（res.error）{
控制台。警告（res）；
}否则{
控制台。警告（res）；
//这个。afterDone（）；
这个。下一个（）；
}
})
.完成（）；
}
}
});
};
//后遗症{
// ;
// }
prev（）{
this.setState（prevState=>（{current:prevState.current-1}））；
}
getStep=props=>this.steps[this.state.current].content；
render（）{
如果（this.state.current(
))}
{this.getStep（getFieldDecorator）}
{' '}
{current0&&(
this.prev（）}
>
以前的
)}
);
}否则{
返回；
}
}
}
导出默认表单。创建（）（向导）；
.foo {
display: none;
opacity: 0;
animation: fade-out 1s 1;
}
.foo.fade-in {
display: block;
opacity: 1;
animation: fade-in 0.5s 1;
}
{steps.map(({ title, content }, i) => (
<div
key={title}
className={i === this.state.current ? "foo fade-in" : "foo"}
>
{content}
</div>
))}