Question

我在React Native中有一个Formik表单，并且有一个YupvalidationSchema。用户提交表单时，如果存在无效字段，我想使用错误字段创建警报。

依赖项： “ formik”：“ ^ 1.4.1”， “ react”：“ 16.5.0”， “ react-native”：“ 0.57.1”，

我尝试在Formik渲染中使用isValid并创建带有错误的Alert，但是我得到了一个空错误对象。但是，如果我再次提交/或单击两次提交，则错误对象包含预期的无效字段。

如何在首次提交时获取错误对象？

Answer 1

这是因为在RN中单击提交按钮时，触摸的对象不会更新。尝试将空白值设置为具有验证架构的字段的初始值。像这样：

initialValues={{ input_1: "", input_2: "" }}

formik git repo中的这个answer帮助了我。

Answer 2

您应该做的是使用模态或类似的方式来显示错误。

使用Formik时，您渲染的组件（您可以使用component，render以及children）将收到具有错误的道具，如您在docs中的示例。

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors将是一个对象，因此您检查keys的{{1}}（或者也可以使用values）并确定是否将错误模态呈现给您，或者不是。

errors

根据模态来自哪里，可以使用<Formik validationSchema={yourValidationSchema} onSubmit={whatYouWantTodoWhenEverythingIsGood} initialValues={{ email: '' }} > {({ errors, values, handleChange, handleBlur}) => ( <View> <TextInput onChangeText={handleChange('email')} onBlur={handleBlur('email')} value={values.email} /> <Button onPress={props.handleSubmit} title="Submit" /> {// checking if you have errors} { Object.keys(errors).length > 0 && <Modal errors={errors}/> } </View> )} </Formik>或类似的东西。

例如使用react-native modal

<Modal isActive={Object.keys(errors).length > 0} errors={errors}/>

您应该使用<Modal visible={Object.keys(errors).length > 0} > <View> {// show the errors the way you want} </View> </Modal>来决定是否显示带有Object.keys(errors).length > 0的模式。

在React Native中提交Formik表单后，如何显示发现错误的警报

2 个答案: