如何使用带有点“.”的输入名称的 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

您应该使用，并且可以在此处和此处的getIn 文档中查看示例。

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