javascript - 在同一Submit按钮上以react-redux形式更新状态和 Prop

我非常陌生，因此可能会变得很糟糕。

我从https://redux-form.com/7.2.3/examples/wizard/开始使用向导表单，然后尝试提交表单并在同一提交单击时更改页面。

我的意思是，在WizardFormSecondPage上提交表单并将页面更改为WizardFormThirdPage以显示值。到目前为止，我设法提交了表单和更改页面，但分别进行并且试图通过单击同一按钮来连接两个事件。

也许可以通过以下语句验证 Prop
并触发.state？
(当然，从句法上讲这是错误的，但只是试图表达想法)

class WizardForm extends Component {
  constructor(props) {
    super(props)
    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.state = {
      page: 1
    }
  }
  nextPage() {
    this.setState({ page: this.state.page + 1 })
  }
  previousPage() {
    this.setState({ page: this.state.page - 1 })
  }

  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
      <div>
        {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />}
        {page === 2 && (
          <WizardFormSecondPage
            previousPage={this.previousPage}
            if(onSubmit={onSubmit}) {
             this.nextPage
             }
          />
        )}
        {page === 3 && (
          <WizardFormThirdPage

          />
        )}
      </div>
    )
  }
}

WizardForm.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default WizardForm

更新:
因此，另一个想法是从showResults.js上的index.js调用的<WizardForm onSubmit={showResults} />渲染第三页

import React from "react";

const testField = () => (
  <div>
   <h1>TEST</h1>
  </div>
);

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default (async function showResults(values) {
  await sleep(500); // simulate server latency
  console.log(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
  testField;
});

默认情况下，showResults返回带有提交的字段信息的console.log，现在我正在尝试仅渲染纯div但没有任何不错的结果。有人可以告诉您遗漏了什么地方，以及创建showResults组件的最佳实践是什么？

最佳答案

https://github.com/final-form/react-final-form解决了我的问题，它功能更强大，更易于使用。