我们有自己的输入组件（例如Checkbox，Textbox甚至是CurrencyInput组件）
我们现在正在使用Formik。因此，我们在组件中将<input...全部<Field...替换为const Checkbox = (props) => {
...
return (
<div className={myClass1}>
<Field type='checkbox' name={props.name} className={myClass2} ... />
<label ...>{props.label}</label>
</div>
)
};
，
Checkbox现在的问题是，我们再也无法在表单外部添加独立 Field（例如，仅用于屏幕上的选项）。它将抛出：
this.props.formik.registerField不是函数
我们认为这是一个突破者。但是在放弃Formik并编写自己的表单验证逻辑之前，我想知道是否还有其他人遇到此依赖关系问题。
真的没有办法在Formik之外渲染Formik demand_dfs_list = [low_demand_df, med_low_demand_df, bc_demand_df, med_high_demand_df, high_demand_df]
dates = pd.date_range(start='2020-10-01', end='2070-09-30', freq='D')
demand_dfs_datetime = []
for df in demand_dfs_list:
df.index = pd.to_datetime(df.index, format='%Y')
df = df.tshift(-92, 'D')
df = df.resample('D').ffill()
df = df.reindex(dates)
demand_dfs_datetime.append(df)
吗？
答案 0 :(得分：1)
Field组件将表单字段连接到Formik状态。它在后台使用上下文； Formik是上下文提供者，Field是上下文使用者。 Field绑定到Formik，在Field之外没有用处。对于您要呈现有时连接到Formik且有时不连接到Formik的表单字段的用例，我将导出两个不同的组件：
虽然type组件可以使用const Checkbox = (props) => {
...
return (
<div className={myClass1}>
<input type='checkbox' checked={props.checked} onChange={props.onChange} />
<label ...>{props.label}</label>
</div>
)
};
const CheckboxField = (props) => {
return (
<Field name={props.name}>
{(field) => <Checkbox label={props.label} {...field} />}
</Field>
)
}
，使其呈现相应的输入，但是can also take a render prop则呈现您想要的任何内容，并传递Formik管理的所有状态那个领域。
例如，您的Checkbox和CheckboxField组件可能看起来像这样：
CheckboxField现在，您使用的两个组件的渲染效果完全相同，但是一个组件可以在Formik表单（Checkbox）中使用，另一个可以在任何地方使用（std::string）。