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

Question

我知道如何使用常规形式设置样式 inputs/selects/etc，但我已经从使用它们切换到 Formik Field，并且上面的方法不一样。

<Formik
  initialValues={{
    example: ''
  }}
  validate={(values) => {
    const errors = {};

    if (!values.example) errors.example = 'Required';

    return errors;

  }}
  onSubmit={this.handleSubmit}
  render={formProps => {
    return (
      <Form>
        <Field type='text' name='example' />
        <ErrorMessage name='example' />
      </Form>
    )
  }} />

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

Answer 1

解决方案

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

看看。继续阅读解释。

说明

最简单的方法是使用 style prop:

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" />

...

Answer 2

当我使用

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

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

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

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

希望这对某人有所帮助。

Answer 3

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

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

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

Answer 4

我使用 react-bootstrap based on

构建了一个组件

它从 useField 钩子中获取 meta 字段并将最终错误传递给 isInvalid 属性：

isInvalid={meta.touched && meta.error}

文本输入的完整组件：

import React from 'react';
import { useField } from 'formik';
import Form from 'react-bootstrap/Form';

export default function TextInput (props) {
  const [field, meta] = useField(props);
  return (
      <Form.Group controlId={props.name}>
        <Form.Label>{props.label}</Form.Label>
        <Form.Control
          name={props.name}
          isInvalid={meta.touched && meta.error}
          {...field}
        />
        <Form.Control.Feedback type="invalid">
          {meta.error}
        </Form.Control.Feedback>
      </Form.Group>
  );
};

用法

import { Form } from 'formik';
import TextInput from './textInput';
<Form>
  <TextInput name="username" label="Username"/>
</Form>

值得一提的是，还有 isValid 道具以完全相反的方式工作，在有效字段上添加绿色标志。

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

How do I style the borders of a formik error field?

css

formik

解决方案

说明