Я использую компонент Formik Field
для визуализации ввода следующим образом:
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
render={formProps => (
<Form>
<Field name="lastName" render={({ field, form }) => (
<input {...field} placeholder="lastName" />
)} />
</Form>
)} />
Вот CodeSandbox , который иллюстрирует проблему. Вы увидите, что если вы поменяете определение столбца продукта на то, которое просто отображает продукт в виде строки, а не использует ввод Formik, он работает нормально.
В приведенном выше коде Formik, похоже, «автоматически» определяет объект мешка Formik form
в функции Field
render
.
Это работало без проблем, пока я не интегрировал Field
в стороннюю библиотеку, в моем случае, рендеринг ее в ячейку таблицы agGrid. Когда я это делаю, я получаю TypeError: this.props.formik.registerField не является функцией ошибки консоли браузера. Отлаживая эту ошибку, я вижу следующее в скомпилированном коде Formik:
FieldInner.prototype.componentDidMount = function () {
this.props.formik.registerField(this.props.name, this);
};
Когда я проверяю this.props.formik
, который должен быть моей сумкой Formik, это пустой объект. Это тот же объект, который я вижу, когда ставлю точку останова в функцию Field
render
. Когда я проверяю этот объект на наличие экземпляров моего Field
за пределами agGrid, это полностью заполненный мешок Formik, включающий initialValue
реквизит, registerField
и т. Д.
Почему Formik неправильно извлекает объект мешка Formik form
, когда мой Field
вложен в ячейку таблицы agGrid и как я могу решить эту проблему?