Redux-forms从ComponentWillRecieveProps调用备用提交

时间:2017-05-26 17:00:49

标签: javascript reactjs redux-form

redux-forms版本: 6.6.3

反应版本: 15.5.0

我想在反应组件中调用componentWillRecieveProps函数中的不同提交函数。

componentWillReceiveProps(nextProps) {

 if (nextProps.updateTierConfigState == "ValidationFulfilled" 
            && nextProps.updateMyConfigValidationClean) {
  console.log('CWRP calling submit()')
  //this.props.submit(); //THIS CALLS DEFAULT on FORM's onSubmit
  this.props.handleSubmit(this.updateSubmit().bind(this))

 }    
 else {
  this.props.handleSubmit(this.createSubmit().bind(this))
 }
}

updateSubmit(values) { 
  //do stuff
}

createSubmit(values) { 
  //do stuff
}

我看到这样的例子:https://github.com/erikras/redux-form/issues/711#issuecomment-191850962

但是,我无法成功调用handleSubmit。它不会调用传入的函数。

我已调试到handleSubmit,并且在调用指定的提交函数时返回非常快。

2 个答案:

答案 0 :(得分:2)

当您传递函数时,您将立即调用这些函数。当您引用提交函数时,您不需要在函数名之后包含()this.updateSubmit().bind(this)应为this.updateSubmit。你也不需要绑定。

更改:this.props.handleSubmit(this.updateSubmit().bind(this))

收件人:this.props.handleSubmit(this.updateSubmit)

答案 1 :(得分:0)

我发现我需要做两件事。

  1. 使用以下行调用自定义提交方法:this.props.handleSubmit((values)=> this.submitUpdate(values))()注意添加的"()"最后。
  2. 将此行(以及周围的if条件)移动到componentDidUpdate()方法。我在submit方法中使用props来决定组件的验证状态,而mapStateToProps中的props不会在componentWillReceivePropscomponentWillUpdate之前分配给this.props。
  3. 这是我的新自动提交电话:

    componentDidUpdate() {
    
     //moved this here so that this.props is updated from nextState
     if (this.props.updateMyConfigState == "ValidationFulfilled" 
                && this.props.updateMyConfigValidationClean) {
    
            this.props.handleSubmit((values) => this.submitUpdate(values))();            
    
     }
    }
    

    我知道这不在用于验证的redux-form建议之外,我认识到这可能不是处理验证的最佳方法。我目前的推理是:

    1. 它允许我有多个提交验证操作(分隔用于创建和更新用户操作的操作),其中每个操作都有自己的错误和警告行为。特别是,错误:禁止操作和WarningsOnly:允许但需要额外的用户批准。
    2. 在gui元素之外的单独列表中直观地显示错误/警告。