如何使用initialValues在一个向导与PrefixedField (React最终形式)? &

Question

我正在使用React Final Form创建一个多步骤的向导表单。

我需要传递initialValues到我的向导，我可以使用字段组件。但是，我想使用PrefixedField，它提供了一个"前缀包装器"。为了更好地构造我的表单数据。不幸的是，当我使用PrefixedField时，initialValues道具不起作用。

<Wizard
initialValues={{
nomeCompleto: "Lois S",
}}
onSubmit={onSubmit}
>
<Wizard.Page>
<FieldPrefix prefix="dadosCliente">
<label htmlFor="nomeCompleto" className="form-label">
Nome Completo
</label>
<PrefixedField
name="nomeCompleto"
className="form-control"
component="input"
type="text"
placeholder="Nome Completo"
validate={required}
/>
<Error name="firstName" />

用于PrefixedFields的代码与用于PrefixedFields的代码完全相同

/************ IMPORTANT CODE STARTS HERE **************/
const FieldPrefixContext = React.createContext();
const FieldPrefix = ({ prefix, children }) => (
<FieldPrefixContext.Provider value={prefix}>
{children}
</FieldPrefixContext.Provider>
);
const PrefixedField = ({ name, ...props }) => (
<FieldPrefixContext.Consumer>
{prefix => <Field name={`${prefix}.${name}`} {...props} />}
</FieldPrefixContext.Consumer>
);
/************* IMPORTANT CODE ENDS HERE ***************/

我在这里做错了什么，或者我应该用另一种方式做吗?提前谢谢。

Answer 1

似乎我只需要添加前缀到我的initialValues。

工作代码:

<Wizard
initialValues={{
dadosCliente:{
nomeCompleto: "Lois S",
}
}}
onSubmit={onSubmit}
>
<Wizard.Page>
<FieldPrefix prefix="dadosCliente">
<PrefixedField id="nomeCompleto" name="nomeCompleto" validate={required}>
{({ input, meta }) => (
<div>
<label htmlFor="nomeCompleto" className="form-label">
Nome Completo
</label>
<input
{...input}
type="text"
placeholder="Nome Completo"
component="input"
className="form-control"
/>
{meta.error && meta.touched && (
<FieldError message={meta.error}></FieldError>
)}
</div>
)}
</PrefixedField >
...