5

我有一个原生Formik表单react和一个YupvalidationSchema。当用户提交表单时，如果存在无效的字段，我想使用错误字段创建警报。

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

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

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

4

2 回答 2

3

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

使用Formik您渲染的组件时（您可以使用component,render也可以使用）将收到带有错误的道具，如您在docschildren的示例中所见。

<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
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

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

于 2019-07-15T17:00:49.687 回答
1

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

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

formik git repo 的这个答案帮助了我。

于 2019-07-15T15:03:07.243 回答