我有一个表单组件(<InvoiceForm.tsx />),我想呈现它的数据,并通过一个按钮组件()推送到数据库<Button.js />中,该组件将在另一个组件()中调用<InvoiceList.tsx />-InvoiceForm的父组件。我该怎么做?我已尝试按照官方文档进行操作,但没有效果。请帮助。
为了更清楚,按钮组件在Invoiclist组件中
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'"通过以下文档。
希望你能给予我一点意见。谢谢。
1条答案
按热度按时间igetnqfo1#
document.getElementById(invoice-form).dispatchEvent(new Event('submit', { cancelable: true }))
把这个放在你的onClick这应该工作(它的工作为我tho)