reactjs - Bir Form bileşenine onSubmit ile nasıl tip verilir?

Kendi Form bileşenim var ve bunu Parent Component'ten ayrı tutmak istiyorum.

const Form: React.FC<any> = ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

Parent Component
const ParentComponent = () => {
...

const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    publishReview(review).then(() => setReview(initialReviewState));
  };

return (
 <Form onSubmit={handleFormSubmit}>
...
</Form>
)}

handleFormSubmit'in türleri bildirimi olan const handleFormSubmit=(event: React.FormEvent<HTMLFormElement>)'den alacağını düşündüm.

Ama yapmıyor

Bir arayüz oluşturmaya çalıştım ve hatta bir any türü ile bile:

interface FormProps {
  handleFormSubmit: any
}
const Form: React.FC<FormProps>= ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

Ama aşağıdaki hatayı verdi:

const Form: React.FunctionComponent<FormProps>
Type '{ children: Element; onSubmit: (event: FormEvent<HTMLFormElement>) => void; }' is not assignable to type 'IntrinsicAttributes & FormProps & { children?: ReactNode; }'.
  Property 'onSubmit' does not exist on type 'IntrinsicAttributes & FormProps & { children?: ReactNode; }'.

Cevap #1

Bu benim için işe yaradı. Sadece tahmininize dayanarak tahmin ediyorum. Teşekkürler!

handlePostForm = (e: React.FormEvent) => {

Cevap #2

Form elemanlarının türünü belirtmeniz gerekecek. Örneğin, formunuzda yourInputName id'sine sahip bir girişiniz olduğunu varsayalım:

<form onSubmit={handleSubmit}>
  <div>
    <label htmlFor="yourInputName">Username:</label>
    <input id="yourInputName" type="text" />
  </div>
  <button type="submit">Submit</button>
</form>

handleSubmit içinde, event.currentTarget'in türünü belirtmeniz gerekecek. Bir form etiketi, elements özelliğine sahip HTMLFormElement türündedir; bu özellikler HTMLFormControlsCollection türündedir, ancak TS'ye bizim inputumuzun ne olduğunu söylemek için bunu geçersiz kılabiliriz. HTMLFormControlsCollection'i genişleten bir arayüz oluşturun, alanınızın türünü belirtin ve ardından HTMLFormElement'teki elements özelliğini geçersiz kılmak için kullanıcı tanımlı arayüzü kullanın.

interface FormElements extends HTMLFormControlsCollection {
    yourInputName: HTMLInputElement
}

interface YourFormElement extends HTMLFormElement {
   readonly elements: FormElements
}

Sonra bu yeni türü işleme fonksiyonunuza geçersiniz

const handleFormSubmit = (e: React.FormEvent<YourFormElement>) => {}

Artık alanınızın değerine erişebilirsiniz ve TypeScript bunun ne olduğunu bilecek

const handleFormSubmit = (e: React.FormEvent<YourFormElement>) => {
    e.preventDefault();
    console.log(e.currentTarget.elements.yourInputName.value)
}

Eğer value üzerine gelerseniz, TS size verinin tipi HTMLInputElement.value: string olduğunu gösteren bir mesaj göstermelidir, tıpkı FormElements arayüzünüzde belirttiğiniz gibi.

Cevap #3

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {

İlgili makaleler