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

Question

我对使用Formik@1.5.7在React中创建表单时呈现错误存在疑问。

我正在尝试根据输入是否被触摸以及是否有错误来找出如何为输入正确渲染不同样式的方法。

window

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

任何帮助将不胜感激。

Answer 1

您接近了，您只是错误地传递了style和styleError。它们不应该被花括号包围（它们也向后倾斜，因为如果没有错误，错误格式将显示出来，反之亦然）。

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

这里是full example。