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

Question

切换新表单后，我似乎无法弄清楚如何清除输入。我能够从每个表单中收集输入并在最后显示，但由于某种原因，来自第一个输入的信息显示在第二个和第三个中，需要手动删除。任何帮助，将不胜感激。谢谢import React, { useState } from 'react';import Form from './Form';import Results from './Results';    enter code herefunction 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:

    return (

      <div className='App-container'>

          <Form

            button='Next'

            nextStep={nextStep}

            name='Name'

            state={state.name} // < --------- This should be state.Name

            handleChange={handleChange}

          />

      </div>

    );

Answer 2

我相信这是因为你在调用时实际上并没有重置你的状态nextStep()。

您只是合并新data的，但其他值：Name, Email,City保持不变

使固定：

const nextStep = () => {

        setState({

            data: state.data + 1,

            Name: '',

            Email: '',

            City: ''

        });

    };