在redux-from中仅重置一个向导

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const WizardStep1 = (props) => {
  const { handleSubmit } = props;

  const onSubmit = (values) => {
    // 处理表单提交逻辑
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" component="input" type="text" />
      </div>
      <button type="submit">Next</button>
    </form>
  );
};

const WizardStep1Form = reduxForm({
  form: 'wizard', // 表单名称
  destroyOnUnmount: false, // 不在卸载时销毁表单数据
})(WizardStep1);

export default WizardStep1Form;

import React from 'react';
import { connect } from 'react-redux';
import { reset } from 'redux-form';

import WizardStep1Form from './WizardStep1Form';

const Wizard = (props) => {
  const { resetForm } = props;

  const handleNextStep = () => {
    // 处理下一步逻辑

    // 重置表单
    resetForm('wizard');
  };

  return (
    <div>
      <h1>Wizard</h1>
      <WizardStep1Form />
      <button onClick={handleNextStep}>Next Step</button>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => ({
  resetForm: (formName) => dispatch(reset(formName)),
});

export default connect(null, mapDispatchToProps)(Wizard);