如何根据错误和触摸状态设置 Formik 字段的样式

Question

我有一个关于在 React 中使用 Formik@1.5.7 创建表单时呈现错误的问题。

我正在尝试根据输入是否被触摸并有错误来确定如何为我的输入正确呈现不同的样式。

 {({ values, error, touched }) => (
        <Form>
          <Field name="Lawn" type="text">
            {({ field, form }) => (
              <Input
                style={form.touched.Lawn && form.errors.Lawn ? 
                                   { style } : { styleError }}
                {...field}
                type="text"
                placeholder="Lawn Details"
              />
            )}
          </Field>

const style = {
  margin: '1em 0em',
  fontSize: '1.5em',
  backgroundColor: 'white',
};

const styleError = {
  margin: '1em 10em',
  fontSize: '1.5em',
};

我认为我的错误与未正确访问表单中的已触摸和错误状态有关。

任何帮助将不胜感激。

Answer 1

您已经接近了，您只是错误地传递了style 和styleError。它们不应该用大括号括起来（而且它们也是向后的，因为错误格式会在没有错误时显示，反之亦然）。

<Input
    style={form.touched.Lawn && form.errors.Lawn ? styleError : style}
    {...field}
    type="text"
    placeholder="Lawn Details"
/>

这是full example。