WithFormik, передать функцию в качестве реквизита
Я использую Formik для создания формы ввода пользователя. И я использую withFormik для обработки моей формы. В настоящее время я передаю свой handleSubmit внутри своего компонента следующим образом:
export const CreateForm = withFormik({
mapPropsToValues: () => ({
primarySkill: "12"
}),
validationSchema: () => FormSchema,
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2)); // For testing
setSubmitting(false);
}, 1000);
}
})(MyForm);
Вместо этого я хотел бы передать что-то подобное <CreateForm handleSubmit = {handleSubmit} /> в свой компонент App.js (корневой). Может ли кто-нибудь дать мне подсказку, как это сделать, пожалуйста?
Ответы 2
Вы можете передать функцию через реквизит так, как вы намекаете внизу своего вопроса. Затем вы можете обернуть вызов withFormik внутри тела функции вашего компонента CreateForm, чтобы вы могли передавать реквизиты компоненту CreateForm и CreateForm контролировать, как эти реквизиты сопоставляются с компонентом Formik.
Например:
const MyComponent = props => {
function handleSubmit(values, { setSubmitting }) {
// handle
}
return (
<CreateForm handleSubmit = { handleSubmit }/>
)
}
const CreateForm = props => {
const { handleSubmit } = props;
const MyFormWithFormik = withFormik({
// ...,
handleSubmit: handleSubmit,
})(MyForm);
return <MyFormWithFormik/>
}
Он выводит пустой результат для меня ``` export const CreatePDSA = ({ handleSubmit }) => { return withFormik({ mapPropsToValues: () => ({ PDSAName: '', PDSAtype: '', primarySkill: '', secondSkill : '', minPrice: '', валюта: '', формат: '' }), validationSchema: () => CreatePdsaSchema, handleSubmit: handleSubmit })(CreatePDSAForm); }; ```
@CCL Я понимаю, в чем проблема. Вызов withFormik возвращает компонент (не экземпляр для рендеринга), поэтому возврат вывода withFormik на самом деле был ошибкой с моей стороны, извините за это! На самом деле вы хотите вернуть экземпляр обернутой формы withFormik. Подробности смотрите в обновлении ответа.
Это динамическое применение HOC. С вышеизложенным вы потеряете все состояние формы при перемонтировании (поля formik вернутся к начальным значениям). Либо перепишите как классический компонент класса и примените HOC в конструкторе, либо примените HOC вне определения компонента. Чтение: http://reactjs.org/docs/…
Второй аргумент в наборе аргументов handleSubmit — это сумка formik. Реквизит помещается в формик-мешок. Доступ к свойствам, переданным в пакет formik, можно получить следующим образом:
handleSubmit: (values, { props }) => {...your function here}
Итак, в моем app.js я отображаю <My Component />? Извините, я очень запутался с функцией withFomik()