[英]How i can save state ( data ) on Previous/Back" button click in ReactJS
我是Reactjs的新手,正在使用向導表單,我想保存用戶數據。 例如,當用戶在其字段中輸入數據並單擊下一個按鈕時(如果用戶單擊上一個按鈕來編輯數據),我希望不會丟失用戶數據。 我對reactjs知之甚少。 請你幫助我好嗎? 我還將分享我的向導表單代碼,在此我可以控制另外4個步驟
碼
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);
為此,您需要更改steps
的默認行為。 您可以通過使用某些CSS使用顯示/隱藏功能:
.foo {
display: none;
opacity: 0;
animation: fade-out 1s 1;
}
.foo.fade-in {
display: block;
opacity: 1;
animation: fade-in 0.5s 1;
}
然后使用條件在js中添加/替換類:
{steps.map(({ title, content }, i) => (
<div
key={title}
className={i === this.state.current ? "foo fade-in" : "foo"}
>
{content}
</div>
))}
我創建了一個工作演示 。
看看是否不是渲染組件,您可以在本地狀態下管理舊數據,如果需要,則需要將數據存儲在某些商店中,例如redux,selector,
最好使用每次單擊來保存當前頁面數據,如果用戶進入上一頁,則只需獲取數據表單API並將其顯示為可編輯字段即可。
我的建議使用redux存儲來存儲響應數據,並使用saga。 它將使您成為一個聰明而快速的開發人員
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.