进入下一步或上一步后插入的数据消失

Question

我的问题是，当我在名为“Lengte”的输入中插入任何内容并转到下一步时，插入的数据就会消失。“Aantal Mensen”也是如此。而且我真的不知道如何解决它...这是我的 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;        }所以，我的问题是如何防止两个输入字段中的值消失，这是什么原因？也欢迎对代码的任何反馈！

Answer 1

你应该有

<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}                      
/>