各位程序员，
在重新加载存储复选框的页面后，我很难保持复选框的切换状态。
例如，如果用户切换复选框，则表示他想用电。然后他按Verder并进入ControlPage，可以在其中检查他的数据是否正确。用户想要编辑其数据时，只需单击Bewerken。随之而来的是，如果用户要编辑StayForm数据，他将看到取消选中了几个secons之前切换的复选框。而且我想防止这种情况，但请问如何。
这是我的StayForm.js：
import React, {Component} from 'react';
import FormValuesContext from '../context/form-values-context';
export default class StayForm extends Component {
static contextType = FormValuesContext;
constructor(context) {
super(context);
this.handleSubmit = this.handleSubmit.bind(this);
this.setCheckBox = this.setCheckBox.bind(this);
}
setCheckBox(e) {
let checkbox = document.getElementById('checkbox')
if (checkbox.checked) {
this.context.setFormData("stay_data", {
...this.context.stay_data, use_of_electricity: e.target.value = true
})
} else {
this.context.setFormData("stay_data", {
...this.context.stay_data, use_of_electricity: e.target.value = false
})
}
}
handleSubmit(e) {
e.preventDefault();
e.stopPropagation();
const data = new FormData(e.target);
const form_data = {
amount_of_people: data.get('amount_of_people'),
arrival_date: data.get('arrival_date'),
leave_date: data.get('leave_date'),
use_of_electricity: data.get('use_of_electricity'),
box_number: data.get('box_number')
}
if (this.context.validateFormData('stay_data', form_data)) {
this.context.setFormData('stay_data', form_data);
this.props.history.push('/control-page');
}
}
render() {
return (
<section className="reservationForm">
<form className="stayForm" onSubmit={this.handleSubmit}>
<div>
<div className="formControl">
<label htmlFor="amountOfPeople">Het aantal mensen</label>
<input
type={"number"}
step="1"
min="1"
max="12"
name="amount_of_people"
defaultValue={this.context.stay_data.amount_of_people}
required
/>
</div>
<div className="formControl">
<label htmlFor="arrivalDate">Datum van aankomst</label>
<input
type="date"
name="arrival_date"
defaultValue={this.context.stay_data.arrival_date}
required
/>
</div>
<div className="formControl">
<label htmlFor="leaveDate">Datum van vertrek</label>
<input
type="date"
name="leave_date"
defaultValue={this.context.stay_data.leave_date}
required
/>
</div>
<div className="formControl">
<label htmlFor="useOfElectricity">Electriciteit bij verblijf</label>
<p>JA</p>
<input
type="checkbox"
name="use_of_electricity"
id="checkbox"
defaultValue={this.context.stay_data.use_of_electricity}
onChange={this.setCheckBox}
/>
</div>
<div className="formControl">
<label htmlFor="boxNumber">Boxnummer</label>
<input
type="number"
name="box_number"
min="1"
max="150"
defaultValue={this.context.stay_data.box_number}
required
/>
</div>
{this.context.stay_data.edit == true ? (
<input type="submit" value="Terug naar de Controle!"/>
) : (<input type="submit" value="Verder!"/>)
}
</div>
</form>
</section>
)
}
}
这是我的ControlPage.js：
import React, {Component} from "react";
import FormValuesContext from '../context/form-values-context';
export default class ControlPage extends Component {
static contextType = FormValuesContext;
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.editPersonalForm = this.editPersonalForm.bind(this);
this.editBoatForm = this.editBoatForm.bind(this);
this.editStayForm = this.editStayForm.bind(this);
}
async postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
});
return response.json();
}
editPersonalForm(event) {
this.props.history.push('/personal-form');
const personal_data = this.context.getFormData('personal_data');
const edit = {
edit: true,
first_name: personal_data.first_name,
last_name: personal_data.last_name,
e_mail: personal_data.e_mail,
phone_number: personal_data.phone_number
}
this.context.setFormData('personal_data', edit);
console.log(event);
}
editBoatForm(event) {
this.props.history.push('/boat-form');
const boat_data = this.context.getFormData('boat_data');
const edit = {
edit: true,
boat_length: boat_data.boat_length,
boat_width: boat_data.boat_width,
boat_depth: boat_data.boat_depth,
}
this.context.setFormData('boat_data', edit);
console.log(event)
}
editStayForm(event) {
this.props.history.push('/stay-form');
const stay_data = this.context.getFormData('stay_data');
const edit = {
edit: true,
amount_of_people: stay_data.amount_of_people,
arrival_date: stay_data.arrival_date,
leave_date: stay_data.leave_date,
use_of_electricity: stay_data.use_of_electricity,
box_number: stay_data.box_number
}
this.context.setFormData('stay_data', edit);
console.log(event)
}
handleSubmit = (e) => {
e.preventDefault();
const personal_data = this.context.getFormData('personal_data');
const boat_data = this.context.getFormData('boat_data');
const stay_data = this.context.getFormData('stay_data');
const post_data = {
first_name: personal_data.first_name,
last_name: personal_data.last_name,
e_mail: personal_data.e_mail,
phone_number: personal_data.phone_number,
boat_length: boat_data.boat_length,
boat_width: boat_data.boat_width,
boat_depth: boat_data.boat_depth,
amount_of_people: stay_data.amount_of_people,
arrival_date: stay_data.arrival_date,
leave_date: stay_data.leave_date,
use_of_electricity: stay_data.use_of_electricity,
box_number: stay_data.box_number
}
this.postData('http://ys-strapi.localhost/reservation-forms', {
first_name: personal_data.first_name,
last_name: personal_data.last_name,
e_mail: personal_data.e_mail,
phone_number: personal_data.phone_number,
boat_length: boat_data.boat_length,
boat_width: boat_data.boat_width,
boat_depth: boat_data.boat_depth,
amount_of_people: stay_data.amount_of_people,
arrival_date: stay_data.arrival_date,
leave_date: stay_data.leave_date,
use_of_electricity: stay_data.use_of_electricity,
box_number: stay_data.box_number
})
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});
};
render() {
if (this.context.stay_data.use_of_electricity === false || this.context.stay_data.use_of_electricity === null
|| this.context.stay_data.use_of_electricity === undefined) {
this.context.stay_data.use_of_electricity = false
} else {
this.context.stay_data.use_of_electricity = true
}
return (
<form onSubmit={this.handleSubmit}>
<div>
<div className="personal-data">
<p>Voornaam: {this.context.personal_data.first_name}</p>
<p>Achternaam: {this.context.personal_data.last_name}</p>
<p>Telefoonnummer: {this.context.personal_data.phone_number}</p>
<p>Email: {this.context.personal_data.e_mail}</p>
<button id={'personal-form'} onClick={this.editPersonalForm}>Bewerken</button>
</div>
<div className="boat-data">
<p>Lengte: {this.context.boat_data.boat_length}</p>
<p>Breedte: {this.context.boat_data.boat_width}</p>
<p>Diepgang: {this.context.boat_data.boat_depth}</p>
<button id={'boat-form'} onClick={this.editBoatForm}>Bewerken</button>
</div>
<div className="stay-data">
<p>Aantal mensen: {this.context.stay_data.amount_of_people}</p>
<p>Datum aankomst: {this.context.stay_data.arrival_date}</p>
<p>Datum vertrek: {this.context.stay_data.leave_date}</p>
<span>Gebruik electra:{this.context.stay_data.use_of_electricity == true ? (<p>JA</p>) : (
<p>Nee</p>)}</span>
<p>Boxnummer: {this.context.stay_data.box_number}</p>
<button id={'stay-form'} onClick={this.editStayForm}>Bewerken</button>
</div>
<input type={"submit"} value={"Bevestigen"} onSubmit={this.handleSubmit}/>
</div>
</form>
)
}
}
这是我的FormValuesState.js：
import React, { Component } from 'react';
import FormValuesContext from './form-values-context';
class FormValuesState extends Component {
state = {
personal_data: {
first_name: '',
last_name: '',
e_mail: '',
phone_number: '',
completed: false,
edit: false
},
boat_data: {
boat_length: 0.0,
boat_width: 0.0,
boat_depth: 0.0,
completed: false,
edit: false
},
stay_data: {
amount_of_people: 0,
arrival_date: 0,
leave_date: 0,
use_of_electricity: false,
box_number: 0,
completed: false,
edit: false
},
current_page: 0,
};
validateFormData = (scope, form_data) => {
// alert(data.get('first_name'));
// console.log(form_data);
const current_state = this.state;
// If validation successed...
current_state[scope].completed = true;
this.setState(current_state);
return true;
};
getFormData = (scope) => {
return this.state[scope];
};
setFormData = (scope, values) => {
let current_state = this.state;
current_state[scope] = values;
this.setState(current_state);
console.log(current_state);
};
getCurrentPage = () => {
return this.state.current_page;
};
setCurrentPage = (page) => {
this.setState({current_page: page});
};
render() {
return (
<FormValuesContext.Provider
value={{
personal_data: this.state.personal_data,
boat_data: this.state.boat_data,
stay_data: this.state.stay_data,
validateFormData: this.validateFormData,
getFormData: this.getFormData,
setFormData: this.setFormData,
getCurrentPage: this.getCurrentPage,
setCurrentPage: this.setCurrentPage,
}}
>
{this.props.children}
</FormValuesContext.Provider>
);
}
}
export default FormValuesState;
这是我的form-value-contex.js：
import React from "react";
export default React.createContext({
personal_data: {
first_name: '',
last_name: '',
e_mail: '',
phone_number: '',
completed: false,
edit: false
},
boat_data: {
boat_length: 0.0,
boat_width: 0.0,
boat_depth: 0.0,
completed: false,
edit: false
},
stay_data: {
amount_of_people: 0,
arrival_date: 0,
leave_date: 0,
use_of_electricity: false,
box_number: 0,
completed: false,
edit: false
},
current_page: 0,
validateFormData: () => {},
getFormData: () => {},
setFormData: () => {},
getCurrentPage: () => {},
setCurrentPage: () => {},
});
非常感谢！