reactjs React最终表格:如何使用窗体外的按钮呈现数据

k10s72fa  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(178)

我有一个表单组件(<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'"通过以下文档。
希望你能给予我一点意见。谢谢。

igetnqfo

igetnqfo1#

document.getElementById(invoice-form).dispatchEvent(new Event('submit', { cancelable: true }))把这个放在你的onClick这应该工作(它的工作为我tho)

相关问题