我的问题是，当我在输入中插入任何名为"Lengate"然后进入下一步，插入的数据就会消失。同样的情况也发生在"；Aaental Mensen"；。我真的不知道该怎么解决…
这是我的MasterForm.js
import React, {Component} from 'react';
import PersonalForm from "./PersonalForm";
import BoatForm from "./BoatForm";
import StayForm from "./StayForm";
export default class MasterForm extends Component {
constructor(props) {
super(props)
this.state = {
currentStep: 1,
first_name: '',
last_name: '',
e_mail: '',
phone_number: '',
boat_length: '',
boat_width: '',
boat_depth: '',
amount_of_people: '',
arrival_date: '',
leave_date: '',
use_of_electricity: '',
box_number: ''
}
this.handleChange = this.handleChange.bind(this)
this._next = this._next.bind(this)
this._prev = this._prev.bind(this)
}
_next() {
let currentStep = this.state.currentStep
currentStep = currentStep >= 2 ? 3 : currentStep + 1
this.setState({
currentStep: currentStep
})
}
_prev() {
let currentStep = this.state.currentStep
currentStep = currentStep <= 1 ? 1 : currentStep - 1
this.setState({
currentStep: currentStep
})
}
get previousButton() {
let currentStep = this.state.currentStep;
if (currentStep !== 1) {
return (
<button type={"button"} onClick={this._prev}>Terug</button>
)
}
return null;
}
get nextButton() {
let currentStep = this.state.currentStep
if (currentStep < 3) {
return (
<button type={"button"} onClick={this._next}>Volgende</button>
)
}
return null;
}
get submitButton() {
let currentStep = this.state.currentStep
if (currentStep === 3) {
return (
<button type={"button"} onClick={this.handleSubmit}>Submit</button>
)
}
}
handleChange(e) {
const {name, value} = e.target
this.setState({[name]: value})
}
handleSubmit = (e) => {
e.preventDefault()
const {first_name, last_name, e_mail, phone_number, boat_length, boat_width, boat_depth, amount_of_people, arrival_date, leave_date, use_of_electricity, box_number} = this.state
alert(`Your reg. details: n
first_name: ${first_name}n
last_name: ${last_name}n
e_mail: ${e_mail}n
phone_number: ${phone_number}n
boat_length: ${boat_length}n
boat_width: ${boat_width}n
boat_depth: ${boat_depth}n
amount_of_people: ${amount_of_people}n
arrival_date: ${arrival_date}n
leave_date: ${leave_date}n
use_of_electricity: ${use_of_electricity}n
box_number: ${box_number}n`)
}
componentDidMount() {
this.reservation_data = JSON.parse(localStorage.getItem('reservation_forms'));
if (localStorage.getItem('reservation_forms')) {
this.setState({
first_name: this.reservation_data.first_name,
last_name: this.reservation_data.last_name,
e_mail: this.reservation_data.e_mail,
phone_number: this.reservation_data.phone_number,
boat_length: this.reservation_data.boat_length,
boat_width: this.reservation_data.boat_width,
boat_depth: this.reservation_data.boat_depth,
amount_of_people: this.reservation_data.amount_of_people,
arrival_date: this.reservation_data.arrival_date,
leave_date: this.reservation_data.leave_date,
use_of_electricity: this.reservation_data.use_of_electricity,
box_number: this.reservation_data.box_number
})
} else {
this.setState({
first_name: '',
last_name: '',
e_mail: '',
phone_number: '',
boat_length: '',
boat_width: '',
boat_depth: '',
amount_of_people: '',
arrival_date: '',
leave_date: '',
use_of_electricity: '',
box_number: ''
})
}
}
componentWillUpdate(nextProps, nextState) {
localStorage.setItem('reservation_forms', JSON.stringify(nextState));
}
render() {
return (
<React.Fragment>
<p>Step {this.state.currentStep}</p>
<form onSubmit={this.handleSubmit}>
<PersonalForm
currentStep={this.state.currentStep}
handleChange={this.handleChange}
first_name={this.state.first_name}
last_name={this.state.last_name}
e_mail={this.state.e_mail}
phone_number={this.state.phone_number}
/>
<BoatForm
currentStep={this.state.currentStep}
handleChange={this.handleChange}
boat_lenght={this.state.boat_length}
boat_width={this.state.boat_width}
boat_depth={this.state.boat_depth}
/>
<StayForm
currentStep={this.state.currentStep}
handleChange={this.handleChange}
amount_of_peopel={this.state.amount_of_people}
arrival_date={this.state.arrival_date}
leave_date={this.state.leave_date}
use_of_electricity={this.state.use_of_electricity}
box_number={this.state.box_number}
/>
{this.previousButton}
{this.nextButton}
{this.submitButton}
</form>
</React.Fragment>
)
}
}
这是我的BoatForm.js组件
import React, {Component} from 'react';
export default class BoatForm extends Component {
render() {
if (this.props.currentStep !== 2) {
return null
}
return (
<div className={"container"}>
<div className="form-group">
<p>Lengte:</p>
<input
type="number"
name="boat_length"
step="0.1"
min="0"
max="15"
value={this.props.boat_length}
onChange={this.props.handleChange}
/>
</div>
<div className="form-group">
<p>Breedte:</p>
<input
type="number"
name="boat_width"
step="0.1"
min="0"
max="4"
value={this.props.boat_width}
onChange={this.props.handleChange}
/>
</div>
<div className="form-group">
<p>Diepgang:</p>
<input
type="number"
name="boat_depth"
step="0.1"
min="0"
max="2"
value={this.props.boat_depth}
onChange={this.props.handleChange}
/>
</div>
</div>
);
}
}
这是我的StayForm.js组件
import React, {Component} from 'react';
export default class StayForm extends Component {
render() {
if (this.props.currentStep !== 3) {
return null;
}
return (
<div className={"container"}>
<div className="form-group">
<p>Aantal Mensen:</p>
<input
type={"number"}
step="1"
min="1"
max="12"
name="amount_of_people"
value={this.props.amount_of_people}
onChange={this.props.handleChange}
/>
</div>
<div className="form-group">
<p>Datum van Aankomst:</p>
<input
type="date"
name="arrival_date"
value={this.props.arrival_date}
onChange={this.props.handleChange}
/>
</div>
<div className="form-group">
<p>Datum van Vertrek:</p>
<input
type="date"
name="leave_date"
value={this.props.leave_date}
onChange={this.props.handleChange}
/>
</div>
<div className="form-group">
<p>Gebruik electra:</p>
<label htmlFor="use_of_electricity">JA</label>
<input
type="checkbox"
checked
name="use_of_electricity"
value={this.props.use_of_electricity}
onChange={this.props.handleChange}
/>
<div className="form-group">
<p>Ligplaats:</p>
<input
type="number"
step="1"
min="1"
max="150"
name="box_number"
value={this.props.box_number}
onChange={this.props.handleChange}
/>
</div>
</div>
</div>
);
}
}
那么，我的问题是如何防止两个输入字段中的值消失，原因是什么？
欢迎对代码的任何反馈！
您应该有
<BoatForm
boat_length={this.state.boat_length}
/>
代替
<BoatForm
boat_lenght={this.state.boat_length}
/>
和
<StayForm
amount_of_people={this.state.amount_of_people}
/>
代替
<StayForm
amount_of_peopel={this.state.amount_of_people}
/>