reactjs 设置值表单函数禁用表单句柄提交

2lpgd968  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(101)

我有一个表单,可以用几种不同的方式处理提交。不同之处在于表单中的一个标志值可以是真或假。
我遇到了一个非常奇怪的问题,当我使用Formik setValues()函数时,表单根本没有进入handleSubmit函数,它只是停止执行。然而,如果我使用this. props. values. x =...设置值,它会进入函数并继续提交表单。
为什么会这样呢?
实际上没有必要显示代码,因为描述已经告诉了你一切,但是提交处理程序看起来是这样的:
确认函数调用设置值的提交处理程序,然后尝试调用handleSubmit

<Confirmation
          items={this.confirmationData()}
          isLoading={this.props.isSubmitting}
          open={isConfirming}
          preapproval={true}
          submitAnother={this.submitAnother}
          onClick={this.submit} //this is the submit handler
          onClose={() => this.setState({ isConfirming: false })}
        />

  submit = () => {
    this.props.setValues({ ...this.props.values, submit: true})
    this.props.handleSubmit()
  }

如果第一行更改为this. props. values. submit = true,表单将使用setValues函数进行提交,应用程序将在提交值设置为true后停止执行。

tzdcorbm

tzdcorbm1#

结果发现问题在于调用setFieldValue时Validating Flag被设置为true,因此最简单的解决方案是向setFieldValue传递第三个参数以手动关闭验证:

submit = () => {
    this.props.setFieldValue('submit', true, false)
    this.props.handleSubmit()
  }

相关问题