如何将 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，您可以在文档 here and here 中查看示例。

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

Answer 2

name.of.input 表示您的 Formik 状态应该具有如下形状：

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

现在您从 Formik 获得的值也将具有相同的形状，因此要从值中获取值，您需要执行以下操作： values={values.name.of.input}

如何将 Formik 与带有点“。”的输入名称一起使用？

How to use Formik with input names that have dots "."?

reactjs

formik

编辑：这是有效的重构版本