Question

我知道如何使用常规的表单输入/选择/等样式设置样式，但是我已经从使用样式切换到Formik字段，并且上述操作方式不同。

main.cpp

那么，如果提交时为空，我如何将输入的边框从通常的红色更改为红色？

Answer 1

当我尝试使用

接受的ErrorMessage组件的答案中建议的技术时

<ErrorMessage name="propertyName" style={{ color: 'red'}}/>

它对我不起作用。当我将它封闭在另一个容器中时，它起作用了。

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

希望这对某人有帮助。

Answer 2

仅供参考，此处给出了适用于样式错误字段（例如边框）的解决方法：

https://stackoverflow.com/a/66395574/1005607

令人惊讶的是，Formik 并未提供开箱即用的此功能，您必须使用自定义代码扩展 std::variant。

但一般来说，您不应该使用 Formik 自己的 <Field> 组件。相反，您应该将 Formik 连接到一个组件库，例如 Material UI 或 React-Bootstrap，它在其组件上公开 <Field> 或 isInvalid={..} 道具。这将允许您正确设置控件的样式。以下是如何将 Formik 连接到 React-Bootstrap 的示例：https://react-bootstrap.github.io/components/forms/#forms-validation-libraries 如果您在控件中键入内容，您将看到其样式如何根据错误而变化。

Answer 3

解决方案

您可以设置Field提供的ErrorMessage和Formik组件的样式，就像对react中的其他任何组件进行样式设置一样。我在这里为您创建了一个有效的演示：https://stackblitz.com/edit/react-formik-field-error-styles

看看。继续阅读以获取解释。

说明

最简单的方法是使用style道具：

function getStyles(errors, fieldName) {
  if (getIn(errors, fieldName)) {
    return {
      border: '1px solid red'
    }
  }
}

...

<Field style={getStyles(formProps.errors, 'example')} type='text' name='example' />

...

但是，如果您需要可管理的自定义，我建议您创建一个自定义组件。 Field为您提供了一个component道具，您可以为其分配自定义组件，例如CustomInput或类似的东西：


function getStyles(errors, fieldName) {
  if (getIn(errors, fieldName)) {
    return {
      border: '1px solid red'
    }
  }
}

function CustomInput({ field, form: { errors } }) {

  return <div>
    <input {...field} style={getStyles(errors, field.name)} />
    <ErrorMessage name={field.name} />
  </div>
}

...

<Field component={CustomInput} type="text" name="example" />

...

如何设置Formik错误字段的边框样式？

3 个答案:

解决方案

说明