Question

这是我面临的问题：

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

＆＃13;

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 .....

＆＃13;

问题是＆＃39; this.context＆＃39;未在onSubmitSucess方法中定义。

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

Answer 1

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

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 .....

Answer 2

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

static contextTypes = {
   router: PropTypes.object
};

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

从redux-form的onSubmitSuccess访问this.context

2 个答案: