reactjs - 使用 Formik 字段组件有条件地检查错误

Question

我已经使用以下形式设置了Formik：

const RenderForm = ({ errors, isSubmitting, isValid, touched }) => {
  return (
    <Form>
      <h3>Sign Up</h3>
      <Email
        name="email"
        error={touched.email && errors.email ? 'error' : null}
      />
      <Password
        name="password"
        error={touched.password && errors.password ? 'error' : null}
      />
      <Button disabled={!isValid || isSubmitting} type="submit">
        Submit
      </Button>
      {/* {errors.firebaseErrorMessage && ( */}
      {/* <Help>{errors.firebaseErrorMessage}</Help> */}
      {/* )} */}
    </Form>
  )
}

Email组件和Password组件只是 Formik 组件的包装器Field。如果验证失败，我希望能够为特定字段添加红色边框。

为此，我为error道具设置了条件。如果它被触摸并且如果错误被传递，那么它会使用“错误”值呈现该道具。

现在有一些问题。

第一个问题我不需要向error属性呈现“错误”值（或任何其他值）。我只需要拥有属性“错误”本身（没有任何值），然后它将被适当地设置样式。

第二个问题

为每个字段写出相同的条件测试有点烦人。我想知道ErrorMessage除了道具之外是否有类似组件的东西。基本上，是这样的：

<Email name="email" errorProp />
<Password name="password" errorProp />

这个想法是，如果存在错误，errorProp将设置一个“错误”属性，如果不存在错误，则什么都不存在。

所以这是我的问题...

我如何创建自己的errorProp，或者至少简化我正在尝试做的事情？

谢谢。

标签： reactjsreact-propsformik