reactjs - HTMLFormElement null kan inte tilldelas en parameter av typen string | Typescript | EmailJS

React Typescript förhindrar mig från att kunna använda boilerplate-koden från emailJS.

Jag har modifierat mallkoden för att åtgärda ett fel på UseRef() och const sendEmail.

Jag får felet på form.current-raden i funktionen sendForm().

Fel: (egenskap) React.RefObject.current: HTMLFormElement | null

Argument av typen 'HTMLFormElement | null' kan inte tilldelas parametern av typen 'string | HTMLFormElement'. Typen 'null' kan inte tilldelas typen 'string | HTMLFormElement'.ts(2345)

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef<HTMLFormElement>(null);

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

Svar #1

Den här typen av fel är anledningen till att jag älskar TypeScript ;)

Kompilatorn är tillräckligt smart för att förstå att form.current kan innehålla ett formulär, eller det kan vara null, så det är typat som HTMLFormElement | null.

I din sendEmail-funktion tar du inte hänsyn till detta fall på något sätt, så kompilatorn skriker och gnäller och har helt rätt!

Du måste ta hänsyn till fallet där form.current är null:

  const sendEmail = (e) => {
    e.preventDefault();

    const currentForm = form.current;
    // this prevents sending emails if there is no form.
    // in case currentForm cannot possibly ever be null,
    // you could alert the user or throw an Error, here
    if (currentForm == null) return;

    // the compiler is smart enough to know that currentForm here is of type HTMLFormElement 
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', currentForm, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

Relaterade artiklar