javascript - 单击同一提交按钮以 react-redux 形式更新状态和 Prop

Question

我对 react 还很陌生，所以它可能会变得糟糕。

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

我的意思是，在 WizardFormSecondPage 上提交表单并将页面更改为 WizardFormThirdPage 以显示值。到目前为止，我设法提交了表单并更改了页面，但它们是分开的，并且努力在单击同一按钮时连接这两个事件。

也许可以通过 statement in 来验证 props并触发 .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 的最佳实践是什么吗？成分？

Answer 1

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