实现Formik，但无法使用react建立正确的连接

Question

我第一次尝试使用formik进行表单处理，我很难找到正确的方法。代码的结构是我有两个文件，一个文件有实际的输入字段，另一个文件我想初始化状态的初始值，所有处理和API调用都将在其中进行。

我会展示一些代码。

实际输入表单代码：

const CompanyProfileForm = () => (
<div style={inputFieldContainer}>
<div style={firstInputColumn}>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>{COMPANY_FORM_INPUT_NAME}</Nunito20>
<InputValidation
type="text"
name="name"
value={formfields.name.value}
handleInputChange={event =>
handleInputChange('name', event.target.value)
}
hasError={formfields.name.hasError}
validationMessage={ERROR_REQUIRED}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_INDUSTRY}
</Nunito20>
<InputValidation
type="text"
name="industry"
value={formfields.industry.value}
handleInputChange={event =>
handleInputChange('industry', event.target.value)
}
hasError={formfields.industry.hasError}
validationMessage={ERROR_REQUIRED}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_ADDRESS}
</Nunito20>
<InputValidation
type="text"
name="address"
value={formfields.address.value}
handleInputChange={event =>
handleInputChange('address', event.target.value)
}
hasError={formfields.address.hasError}
validationMessage={ERROR_REQUIRED}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_CR_NUMBER}
</Nunito20>
<InputValidation
type="number"
name="crn"
value={formfields.crn.value}
handleInputChange={event =>
handleInputChange('crn', event.target.value)
}
hasError={formfields.crn.hasError}
validationMessage={ERROR_REQUIRED}
/>
</div>
</div>
.....// the rest of the input field
);
export default CompanyProfileForm

应该包含逻辑的文件：

const CompanyProfile = () => {
const formik = useFormik({
initialValues: {
name: '',
industry: '',
address: '',
crn: '',
website: '',
employeesNbr: '',
phoneNumber: '',
userRole: '',
personCheck: false,
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<Skeleton pageTitle={PAGE_TITLE_COMPANY_PROFILE}>
<CompanyProfileForm />
</Skeleton>
);
};
export default CompanyProfile;

如何实现正确的转换或连接，使输入字段现在处于formik的控制之下？

Answer 1

1. useFormik假设在与表单相同的组件中调用，或者(这对我来说没有意义(，你可以将formik实例传递给表单。在你的代码中，无法访问CompanyProfileForm中的formik实例
2. 在我看来，你似乎没有阅读文档，而是直接来这里写问题，这不是你应该做的
3. https://jaredpalmer.com/formik/docs/api/useFormik#example-它清楚地展示了如何使用Formik：

Init:

const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});

连接到表单：<form onSubmit={formik.handleSubmit}>

连接到字段：

<input
id="lastName"
name="lastName"
type="text"
onChange={formik.handleChange}
value={formik.values.lastName}
/>