如何根据错误和触摸状态样式形式

Question

我有一个关于使用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"
/>

这是一个完整的例子。