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和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与带有点“。”的输入名称一起使用？

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

2 个答案: