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属性提供'error'值（或其他任何值）。我只需要本身具有“错误”属性（没有任何值），然后将其设置适当的样式即可。

第二个问题

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

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

这种想法是errorProp将在存在错误的情况下设置'error'属性，而在不存在错误的情况下则不设置属性。

这是我的问题...

我如何创建自己的errorProp，或者至少简化我的工作？

谢谢。

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

0 个答案: