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

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;boat_length={this.state.boat_length} />代替<BoatForm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;boat_lenght={this.state.boat_length} />和<StayForm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;amount_of_people={this.state.amount_of_people}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;/>代替<StayForm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;amount_of_peopel={this.state.amount_of_people}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; />