Question

我很反应，所以它可能会变得糟糕。

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

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

也许有可能用声明来验证道具并触发.state？（当然，从语法上讲，这是错误的，但只是试图表明想法）

from countries import country_list # Note: the list is so large, 
                                   # and is extracted from another file


country_counts = {}

for country in country_list:
    if country not in country_counts:
        country_counts[country] = 1
    else:
        country_counts[country] = country_counts[country] + 1

更新因此，另一个想法是在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提交的字段信息，现在我只想渲染普通的div但没有任何不错的结果。有人可能会说出错过了哪些内容以及创建console.log组件的最佳做法是什么？

Answer 1

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

Answer 2

你可以创建一个：

class WizardFormSecondPage extends Component {
    constructor(props) {
     super(props);
     this.myHandleSubmit = this.myHandleSubmit.bind(this)
 }
  myHandleSubmit(){
    this.props.handleSubmit()
    this.props.nextPage()
 }
....
....
<Form onSubmit={this.myHandleSubmit}> 
}

所以基本上将自定义处理程序传递给您的表单或按钮！

在相同的Submit按钮单击中以react-redux形式更新state和props

2 个答案: