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

Question

我知道如何使用常规表单输入/选择/等对其进行样式设置，但我已从使用这些切换到 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

解决方案

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

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

解释

最简单的方法是使用styleprop：

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>

希望这可以帮助某人。