reactjs - 如何在 React Native 中提交 Formik 表单后显示错误警报

Question

我有一个 react 原生的 Formik 表单和一个 Yup 验证模式。当用户提交表单时，如果存在无效字段，我想创建一个包含错误字段的警报。

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

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

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

Answer 1

你应该做的是有一个模态或类似的东西来显示错误。

当使用Formik时您渲染的组件(您可以使用 component 、 render 以及 children )将收到带有错误的 prop，如您在 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 (或者您也可以使用 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>

根据模态框的来源，您可以使用 <Modal isActive={Object.keys(errors).length > 0} errors={errors}/>或其他类似的事情。

例如使用react-native modal

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

您应该使用Object.keys(errors).length > 0决定是否应该使用 errors 显示模式或不。