将函数导入 React 组件并在 onSubmit 中使用

Question

我希望生成一个使用 formData（来自表单输入）和数据（来自 react 上下文）的 pdf。因此，不同来源的数据汇集在 pdf 中。

我有一个组件表单，它有一个 onSubmit 函数，它基本上有一个任务来生成这个 pdf。下面只是它的相关部分：

export const Form = () => {
  const onSubmit = (formData) => {
    generatePdf(formData);
  };
}

在另一个文件中，我有我的 pdf 逻辑，我将其导入到表单组件中：

import { jsPDF } from "jspdf";

import { useFormData } from "../context";

export default function generatePdf (formData) {
    const data = useFormData();
    const chosenContract = Object.values(data.contract);
    const doc = new jsPDF();
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(chosenContract[1] + ',', 10, 35);
    doc.text(chosenContract[2] + ' ' + '€/monatlich' + ',', 10, 40);
    doc.text(chosenContract[4], 10, 45);
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(JSON.stringify(formData), 10, 70);
    window.open(URL.createObjectURL(doc.output("blob")))
    { console.log(formData);} 
}

因为我是初学者，所以我有点迷茫，如何以及将哪些参数传递给 generatePdf，以便它在我的表单组件中工作。现在我只收到 Error: Invalid hook call。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

我还尝试将数据和 formData 传递到 generatePdf 函数 function generatePdf (data,formData) 并在 Form 组件中定义数据，但后来我在 generatePdf 中得到了 undefined for const chosenContract = Object.values(data.contract);.

最初我的代码全部在 Form 中并且它显然有效，但是随着 Form 组件变长，我打算遵循干净的代码规则并外包我的 pdf 逻辑。原代码如下：

export const Form = () => {
  const { data } = useFormData();

  const onSubmit = (formData) => {
    const chosenContract = Object.values(data.contract);
    const doc = new jsPDF();
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(chosenContract[1] + ',', 10, 35);
    doc.text(chosenContract[2] + ' ' + '€/monatlich' + ',', 10, 40);
    doc.text(chosenContract[4], 10, 45);
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(JSON.stringify(formData), 10, 70);
    window.open(URL.createObjectURL(doc.output("blob")))
    console.log(formData)
    //makeContract();
  };
}

Answer 1

你可以使用两者之间的东西。 useFormData 钩子必然需要在 React 组件中调用，即 Form 组件。

我建议将实用程序逻辑分开以实现可维护性和关注点分离，并从挂钩中传入 data。

generatePdf 实用程序

import { jsPDF } from "jspdf";

export default function generatePdf (formData, data) {
  const chosenContract = Object.values(data.contract);
  const doc = new jsPDF();

  doc.setFontSize(14);
  doc.setFont('undefined', 'bold');
  doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
  doc.setFontSize(10);
  doc.setFont('undefined', 'normal');
  doc.text(chosenContract[1] + ',', 10, 35);
  doc.text(chosenContract[2] + ' ' + '€/monatlich' + ',', 10, 40);
  doc.text(chosenContract[4], 10, 45);
  doc.setFontSize(14);
  doc.setFont('undefined', 'bold');
  doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
  doc.setFontSize(10);
  doc.setFont('undefined', 'normal');
  doc.text(JSON.stringify(formData), 10, 70);
  window.open(URL.createObjectURL(doc.output("blob")));
}

表格

import { useFormData } from "../context";

export const Form = () => {
  const { data } = useFormData();

  const onSubmit = (formData) => {
    generatePdf(formData, data);
  };

  ...
}

将函数导入 React 组件并在 onSubmit 中使用

Import function into react component and use it in onSubmit

jspdf

reactjs

react-hooks