Как стилизовать поля Formik на основе ошибки и состояния касания - PullRequest
Новая
       1

Как стилизовать поля Formik на основе ошибки и состояния касания

0 голосов
/ 20 мая 2019

У меня есть вопрос об ошибках рендеринга при использовании Formik@1.5.7 для создания форм в React.

Я пытаюсь выяснить, как правильно отображать различные стили для моего ввода, основываясь на том, был ли вход затронут и есть ошибки.

 {({ 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',
};

Я считаю, что моя ошибка связана с неправильным доступом к состояниям касания и ошибки в форме.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 21 мая 2019

Вы близки, вы просто неправильно передали style и styleError. Они не должны быть заключены в фигурные скобки (и они также обратные, потому что форматирование ошибок будет отображаться, когда ошибок нет и наоборот). 

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

Вот полный пример .

...