Как использовать Formik с входными именами, которые имеют точки "."?

Question

Я не могу получить handleChange для обновления ввода точками "." во имя. Кто-нибудь решил эту проблему?

<Formik component={({
  handleSubmit,
  handleChange,
  handleBlur,
  values,
  errors,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      onChange={handleChange}
      onBlur={handleBlur}
      value={values['name.of.input']}
      name="name.of.input"
    />
    {errors['name.of.input'] && <div>{errors['name.of.input']}</div>}
    <button type="submit">Submit</button>
  </form>
)} />;

---

Редактировать: Вот переработанная версия, которая работает

<Formik component={({
  initialValues={{
    name: {
      of: { 
        input: ''
      }
    }
  }},
  handleSubmit,
  handleChange,
  handleBlur,
  values,
  errors,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      onChange={handleChange}
      onBlur={handleBlur}
      value={values.name.of.input}
      name="name.of.input"
    />
    {getIn(errors, 'name.of.input') && <div>getIn(errors, 'name.of.input')</div>}
    <button type="submit">Submit</button>
  </form>
)} />;

Answer 1

name.of.input означает, что ваше состояние Formik должно иметь такую ​​форму:

{
  name: {
    of: {
      input: ''
    }
  }
}

Теперь значения, которые вы получаете от Formik, также будут иметь такую ​​же форму, поэтому для доступа к значениям из значений, которые вы нужно сделать это: values={values.name.of.input}

Answer 2

Вы должны использовать getIn, и вы можете увидеть примеры в документах здесь и здесь .

const inputValue = getIn(values, 'name.of.input')
const inputError = getIn(errors, 'name.of.input')
const inputTouched = getIn(touched, 'name.of.input')