Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Redux表单从ComponentWillReceiveProps调用备用提交_Javascript_Reactjs_Redux Form - Fatal编程技术网

Javascript Redux表单从ComponentWillReceiveProps调用备用提交

Javascript Redux表单从ComponentWillReceiveProps调用备用提交,javascript,reactjs,redux-form,Javascript,Reactjs,Redux Form,redux表单版本:6.6.3 react版本:15.5.0 我想从我的react组件中的ComponentWillReceiveProps函数调用不同的submit函数 componentWillReceiveProps(nextProps) { if (nextProps.updateTierConfigState == "ValidationFulfilled" && nextProps.updateMyConfigValidationClea

redux表单版本:6.6.3

react版本:15.5.0

我想从我的react组件中的ComponentWillReceiveProps函数调用不同的submit函数

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
}
我看到过这样的例子:

但是,我未能成功地调用handleSubmit。它不调用传入的函数


我已经调试到handleSubmit,它返回得非常快,没有调用指定的submit函数。

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

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


To:
this.props.handleSubmit(this.updateSubmit)

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

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


To:
this.props.handleSubmit(this.updateSubmit)

我发现我需要做两件事

  • 使用以下行调用自定义提交方法:
    this.props.handleSubmit((值)=>this.submitUpdate(值))()
    注意末尾添加的“()”
  • 将此行(以及周围的if条件)移动到componentDidUpdate()方法。我正在使用submit方法中的道具来确定组件的验证状态,MapStateTops中的道具未分配给此。组件之前的道具将接收道具或组件更新 这是我新的自动提交呼叫:

    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表单对验证的建议,我认识到这可能不是处理验证的最佳方式。我目前的理由是:

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

  • 我发现我需要做两件事

  • 使用以下行调用自定义提交方法:
    this.props.handleSubmit((值)=>this.submitUpdate(值))()
    注意末尾添加的“()”
  • 将此行(以及周围的if条件)移动到componentDidUpdate()方法。我正在使用submit方法中的道具来确定组件的验证状态,MapStateTops中的道具未分配给此。组件之前的道具将接收道具或组件更新 这是我新的自动提交呼叫:

    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表单对验证的建议,我认识到这可能不是处理验证的最佳方式。我目前的理由是:

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

  • 需要查看
    this.props.handleSubmit
    函数来调试它。没有直接关系,但我认为if语句中的嵌套已关闭。if块后面有两个大括号,而浮动在
    组件willreceiveprops
    @Jose之外的else块只存在于上面的帖子中,而不存在于我的实际代码中。“仍将更正。@ChaseDeAnda,handleSubmit由redux表单库实现。请签出。”。“将其作为onSubmit道具传递给装饰组件。在这种情况下,您可以在装饰组件内使用onSubmit={this.props.handleSubmit}使其在单击提交按钮时触发。将其作为参数从装饰组件内传递给this.props.handleSubmit函数。在这种情况下,您可以使用onClick。”={this.props.handleSubmit(mySubmit)}位于装饰组件中,以使其在单击提交按钮时触发。“需要查看
    this.props.handleSubmit
    函数来调试它。没有直接关系,但我认为您在if语句中的嵌套是关闭的。if块后面有两个大括号,而浮动在
    组件之外的else块将接收props
    @Jose,缺少的}只存在于上面的帖子中,而不存在于我的实际代码中。“仍将更正。@ChaseDeAnda,handleSubmit由redux表单库实现。请签出。”。“将其作为onSubmit道具传递给装饰组件。在这种情况下,您可以在装饰组件内使用onSubmit={this.props.handleSubmit}使其在单击提交按钮时触发。将其作为参数从装饰组件内传递给this.props.handleSubmit函数。在这种情况下,您可以使用onClick。”={this.props.handleSubmit(mySubmit)}在装饰组件中,当单击提交按钮时,导致其启动。“谢谢,我犯了在updateSubmit之后放置()的错误。但是,修复后,handleSubmit仍然不调用函数updateSubmit。谢谢,我犯了放置()的错误。”但是,在修复该问题之后,handleSubmit仍然不调用函数updateSubmit。