React Final Form:如何在表单外用按钮呈现数据

Question

我有一个表单组件(<InvoiceForm.tsx/>我该怎么做？我曾试图遵循官方文件，但没有成功。请帮忙。

为了更清楚，按钮组件在Invoicelist组件中

const initialValues = {
name: '',
description: ''
}
const InvoiceForm = ({
handleSubmit,
invoice,
}: {
handleSubmit: () => void
invoice: Cart
}) => {
const form = useLazyRef(() => createForm({

initialValues: {
invoices: invoice != null
? invoice.items.map((item) => ({
name: item.name,
description: item.description
})) : [initialValues]
},
keepDirtyOnReinitialize: false,
mutators: { ...arrayMutators },
onSubmit: handleSubmit
}))
return (

<div className="c-invoices-content">
<div className="c-invoices-panel">
<div className="c-invoices-panel__body">
<Form
onSubmit={handleSubmit}
form={form}
render={({ handleSubmit, form, values}) => {

return (
<form
id="invoice-form"
autoComplete="off"
onSubmit={handleSubmit}
className="form"
>
<FieldArray name="invoices">
{({ fields }) => fields.map((name, index) => {
const isFirst = index === 0
return (
<div className="form-field-row" key={name}>
<Field
className="textfield"
name={`${name}.name`}
component={TextInput}
placeholder="Name"
formInline
formLabel={isFirst ? 'Item Name' : ''}
validate={(values) => values ? undefined : 'Name can't be blank'}
/>
<Field
className="textfield"
name={`${name}.description`}
component={TextInput}
placeholder="Description"
formInline
formLabel={isFirst ? 'Description' : ''}
validate={(values) => values ? undefined : 'Description can't be blank'}
/>
<Button
className="form-field__action"
onClick={() => fields.remove(index)}
>
<Trash color="#555" size={24} />
</Button>
</div>
)
})}
</FieldArray>
<div className="form-field-row">
<Button
type="secondary"
onClick={() => form.mutators.push('invoices', initialValues)}
className="--border-dashed"
>
+ Add Item
</Button>

</div>

</form>
)
}}
/>
</div>
</div>
</div>
)
}
export default InvoiceForm

这就是我玩过的关于如何提取表单内容的地方，但仍然没有。

<Button
onClick={() => {}}
>
Create
</Button>

我得到了"；找不到名称"handleSubmit"通过遵循文档。

希望你能给我一个意见。非常感谢。

Answer 1

如果您只想在表单之外呈现数据，则必须使用FormSpyhttps://final-form.org/docs/react-final-form/api/FormSpy有一些详细显示的参考资料https://github.com/final-form/react-final-form/issues/419如果你想访问以在表单之外提交表单，你可以在这里使用此代码=document.getElementById("invoice-form").dispatchEvent(new Event('submit', { cancelable: true }))把这个放在你的onClick中这应该有效(对我来说有效(你需要获得你的elementId，然后通过调度事件"；提交"；你提交，结合这2个，你应该能够到达那里