在 React Multi Form 上提交后清除输入

Question

切换新表单后，我似乎无法弄清楚如何清除输入。我能够从每个表单中收集输入并在最后显示，但由于某种原因，来自第一个输入的信息显示在第二个和第三个中，需要手动删除。任何帮助，将不胜感激。谢谢

import React, { useState } from 'react';

import Form from './Form';

import Results from './Results';

    enter code here

function App() {

    const [state, setState] = useState({

        data: 1,

        Name: '',

        Email: '',

        City: ''

    });

    const nextStep = () => {

        setState({

            ...state,

            data: state.data + 1

        });

    };

    const handleChange = e => {

        setState({ ...state, [e.target.name]: e.target.value });

    };

    switch (state.data) {

        case 1:

            return (

                <div className='App-container'>

                    <Form

                        button='Next'

                        nextStep={nextStep}

                        name='Name'

                        state={state.name}

                        handleChange={handleChange}

                    />

                </div>

            );

        case 2:

            return (

                <div className='App-container'>

                    <Form

                        button='Next'

                        nextStep={nextStep}

                        name='Email'

                        state={state.email}

                        handleChange={handleChange}

                    />

                </div>

            );

        case 3:

            return (

                <div className='App-container'>

                    <Form

                        button='Submit'

                        nextStep={nextStep}

                        name='City'

                        state={state.city}

                        handleChange={handleChange}

                    />

                </div>

            );

        case 4:

            return (

                <div className='App-container'>

                    <Results data={state} />

                </div>

            );

        default:

            return 'Error';

    }

}

Answer 1

问题是你正在传递state.name到你的表单组件，什么时候应该是state.Name，见下文：switch (state.data) {case 1:&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className='App-container'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button='Next'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextStep={nextStep}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name='Name'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state={state.name} // < --------- This should be state.Name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );

Answer 2

我相信这是因为你在调用时实际上并没有重置你的状态nextStep()。您只是合并新data的，但其他值：Name, Email,City保持不变使固定：const nextStep = () => {&nbsp; &nbsp; &nbsp; &nbsp; setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: state.data + 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Name: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Email: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; City: ''&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };