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

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

javascript reactjs

Javascript 进入下一步或上一步后，插入的数据消失,javascript,reactjs,Javascript,Reactjs,我的问题是，当我在名为“Lengte”的输入中插入任何内容并转到下一步时，插入的数据就消失了。“安塔尔·门森”也是如此。我真的不知道如何修复它这是我的MasterForm.js import React, {Component} from 'react'; import PersonalForm from "./PersonalForm"; import BoatForm from "./BoatForm"; import StayForm from &

我的问题是，当我在名为“Lengte”的输入中插入任何内容并转到下一步时，插入的数据就消失了。“安塔尔·门森”也是如此。我真的不知道如何修复它

这是我的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>
        )
    }
}

import React，{Component}来自'React'；
从“/PersonalForm”导入PersonalForm；
从“/BoatForm”导入BoatForm；
从“/StayForm”导入StayForm；
导出默认类MasterForm扩展组件{
建造师（道具）{
超级（道具）
此.state={
当前步骤：1，
名字：''，
姓氏：“”，
电子邮件：“”，
电话号码：''，
船长：''，
船的宽度：''，
船深：''，
人数的数量：''，
到达日期：''，
离开日期：''，
使用电：''，
框号：''
}
this.handleChange=this.handleChange.bind（this）
this.\u next=this.\u next.bind（this）
this.\u prev=this.\u prev.bind（this）
}
_下一个（）{
让currentStep=this.state.currentStep
当前步骤=当前步骤>=2？3：当前步骤+1
这是我的国家({
currentStep:currentStep
})
}
_prev（）{
让currentStep=this.state.currentStep
currentStep=currentStep{
e、 预防默认值（）
常数{名字、姓氏、电子邮件、电话号码、船长、船宽、船深、人数、到达日期、离开日期、用电、箱号}=此状态
警报（`您的注册详细信息：\n
first\u name:${first\u name}\n
姓氏：${last\u name}\n
电子邮件：${e\u mail}\n
电话号码：${phone\u number}\n
船长：${船长}\n
船宽：${船宽}\n
船深：${船深}\n
人数：${人数}\n
到达日期：${arrival\u date}\n
休假日期：${休假日期}\n
用电：${用电}\n
箱号：${箱号}\n`）
}
componentDidMount（）{
this.reservation_data=JSON.parse（localStorage.getItem（'reservation_forms'）；
if（localStorage.getItem（'reservation_forms'））{
这是我的国家({
名字：this.reservation\u data.first\u name，
姓氏：this.reservation\u data.last\u name，
e_-mail:this.reservation_data.e_-mail，
电话号码：此。预订号码。电话号码，
船长：此.reservation\u data.boat\u length，
船宽：此.reservation\u data.boat\u width，
船深：此.reservation\u data.boat\u depth，
人数：this.reservation\u data.amount\u of \u people，
到达日期：此为.reservation\u data.arrival\u date，
离开日期：此为.reservation\u data.leave\u date，
用电：这个。保留数据。用电，
箱号：此.预订数据.箱号
})
}否则{
这是我的国家({
名字：''，
姓氏：“”，
电子邮件：“”，
电话号码：''，
船长：''，
船的宽度：''，
船深：''，
人数的数量：''，
到达日期：''，
离开日期：''，
使用电：''，
框号：''
})
}
}
组件将更新（下一步，下一步状态）{
setItem（'reservation_forms'，JSON.stringify（nextState））；
}
render（）{
返回(
步骤{this.state.currentStep}
{this.previousButton}
{this.nextButton}
{this.submitButton}
)
}
}

这是我的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>
        );
    }
}

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>
        );
    }
}

import React，{Component}来自'React'；
导出默认类BoatForm扩展组件{
render（）{
如果（this.props.currentStep！==2）{
返回空
}
返回(
朗特：
布里德特：
迪普冈：
);
}
}

这是我的StayForm.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>
        );
    }
}

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>
        );
    }
}

import React，{Component}来自'React'；
导出默认类StayForm扩展组件{
render（）{
如果（this.props.currentStep！==3）{
返回null；
}
返回(
安塔尔·门森：
范安科姆斯特基准面：
范维特里克基准面：
伊莱克特拉：
青年成就组织
狮虎：
);
}
}

所以，我的问题是如何防止两个输入字段中的值消失，原因是什么

欢迎对代码进行任何反馈！

您应该有

<BoatForm                        
    boat_length={this.state.boat_length}
/>

而不是

<BoatForm                        
    boat_lenght={this.state.boat_length}
/>

<StayForm                       
  amount_of_peopel={this.state.amount_of_people}                      
/>

及

而不是

<BoatForm                        
    boat_lenght={this.state.boat_length}
/>

<StayForm                       
  amount_of_peopel={this.state.amount_of_people}                      
/>

我想它可能是你的

handleChange

函数。它应该是：

this.setState（{…this.state，[name]：value}）

@szczocik它没有多大帮助。现在，当我在输入字段中插入任何内容时，所有的组件