从 redux-form 的 onSubmitSuccess 访问 this.context

Question

这是我面临的问题：

我在我的应用程序中使用了 react-router 和 redux-form。在我的一个表单中，我想在提交成功后使用路由器返回主页面。这是我的代码：

function Router(target) {
  target.contextTypes = target.contextTypes || {};
  target.contextTypes.router = React.PropTypes.func.isRequired;
}

enter code here
@Router
@reduxForm({
    form: 'editLocation',
    fields: LocationFormFields,
    validate: ValidateLocationForm,
    onSubmitSuccess: () => {
        var path = '/locations';
        this.context.router.push(path);
    },
    onSubmitFail: () => {
        console.log('failed');
    }
}, MapStateToProps)
export class EditLocation extends React.Component .....

问题是 'this.context' 没有在 onSubmitSucess 方法中定义。

我知道我可以直接使用 browserHistory 来解决这个问题。但是，我不想真的走那条路，我想使用 this.cotext。有任何想法吗？

Answer 1

要在组件内使用 context，您需要指定 contextTypes

static contextTypes = {
   router: PropTypes.object
};

所以我建议要么从组件内部调用函数并在那里指定 contextTypes，要么添加一个高阶组件来处理它。

Answer 2

我认为你最好的选择是不要让你的表单组件与你的路由组件相同，并将 onSubmitSuccess 作为 prop 传递给你的表单组件。

import { withRouter } from 'react-router'

@withRouter // injects router as prop
export class EditLocation extends React.Component {

  handleSubmitSuccess() {
    this.props.router.push('/locations')
  }

  render() {
    return <EditLocationForm
      onSubmitSuccess={this.handleSubmitSuccess}/>
  }      
}

@reduxForm({
    form: 'editLocation',
    fields: LocationFormFields,
    validate: ValidateLocationForm,
    onSubmitFail: () => {
        console.log('failed');
    }
}, MapStateToProps)
export class EditLocationForm extends React.Component .....

从 redux-form 的 onSubmitSuccess 访问 this.context

Accessing this.context from onSubmitSuccess of redux-form

reactjs

react-router

redux-form