Question

我在React Native代码中有一个Formik形式，如下所示。完整的可运行链接可以在以下位置查看： here

当前行为：
验证只能使用handleSubmit进行，不能用于处理进一步的操作。请注意，如果onSubmit检测到任何验证错误，则不会触发handleSubmit。

 <Button onPress={handleSubmit} style={styles.button}>
     Submit
 </Button>

期望的解决方案：
尝试提交后验证失败时调用的生命周期事件（例如：onValidationError），我可以在其中访问所有输入的验证错误道具以采取进一步措施。

例如：我想处理一些事情（例如，验证失败时弹出警报或滚动到第一条错误消息）

该代码应该类似于以下内容，或者也可以接受其他任何方式。只要发生验证错误时我就可以处理事件。

 <Formik
    onSubmit={values => {
       alert(JSON.stringify(values, null, 2));
       Keyboard.dismiss();
    }}
    onValidationError={errorValues => {
       // any action here
       // note that onValidationError is not a built in function
       // but it would be best if it can be achieved this way
       // else any other equivalent solution also can be accepted
    }}
    validationSchema={validationSchema}>

尝试了什么？
我试图在这里集成2解决方案。但未能成功。
https://github.com/jaredpalmer/formik/issues/1019
https://github.com/jaredpalmer/formik/issues/1484

Answer 1

您可以在isValid的{{1}}事件上使用<Formik>道具（来自<form>的渲染道具），方法是绕过逻辑{Documentation ）

onsubmit

您可以从Formik的渲染道具中访问<form onSubmit={e => { console.log("isValid", isValid); isValid ? handleSubmit(e) : alert("Handle your custom method instead here"); }} >道具

isValid

我也制作了codeandbox，您可以在此处查看工作示例-https://codesandbox.io/s/trusting-jennings-7wq0f

注意：formik存储库或任何地方的任何问题都未正式提及，但这是自定义方式对{props => { const { values, touched, errors, dirty, isSubmitting, handleChange, handleBlur, handleSubmit, handleReset, isValid // add this to your code } = props; return ( ... your code ); }}的{{1} }事件

希望这很有帮助！

Answer 2

我想以上答案可以解决您的问题，很遗憾，我使用lst = ["abc", "acd", "ade"] for x in lst: x = x.replace("a", "x") print(lst) # ["abc", "acd", "ade"]库创建了几种形式（也有些复杂的形式）。这比formik和redux形式更好。我建议尝试一次，轻松插入并使用许多动态功能和验证（包括模式）。 https://react-hook-form.com/

Answer 3

您可以使用validate方法来完成此操作。只要确保您返回错误对象，表单就可以处理验证。

  <Formik
    onSubmit={async values => {
      console.log('submit', values)
    }}
    validate={values => {
      const errors = {}
     
      // Check the values object, and add custom validation 

      return errors
    }}
  ></Formik>

Answer 4

有一种非常简单的方法可以做到这一点。

在提交按钮的 onClick 方法上，您可以定义这样的方法；

resource "aws_lambda_event_source_mapping" "example" {
  event_source_arn  = aws_dynamodb_table.example.stream_arn
  function_name     = aws_lambda_function.example.arn
  starting_position = "LATEST"
}

a project I forked

<button onClick={() => scrollToErrors(errors)} > //errors param is formik's errors param.

发生验证错误时处理Formik表格

4 个答案: