Typescript error (Property 'submitter' does not exist on type 'Event') when tryi-CodePudding

I have a React form that has two submit buttons that hit two different endpoints with Axios.

When I try to grab the form submitter's value (which endpoint to hit), I get the following error when using React with TS.

Property 'submitter' does not exist on type 'Event'

My code is as follows:

  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    const submitter = e.nativeEvent.submitter.value;

    e.preventDefault();
    checkedBox.length > 0 &&
      (await axios
        .post(
          `${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
          checkedBox
        )
        .then((response) => {
          if (response.status === 200) {
            setForceUpdate((current) => (current  = 1));
          }
        })
        .catch((error) => {
          console.log(error);
        }));
  }

If I change the function type to (e: React.BaseSyntheticEvent) another error pops up on the onSubmit attribute.

      <form onSubmit={handleSubmit}>

The error is:

Type '(e: BaseSyntheticEvent<HTMLFormElement, any, any>) => Promise' is not assignable to type 'FormEventHandler'. Types of parameters 'e' and 'event' are incompatible. Type 'FormEvent' is not assignable to type 'BaseSyntheticEvent<HTMLFormElement, any, any>'. Types of property 'nativeEvent' are incompatible. Type 'Event' is missing the following properties from type 'HTMLFormElement': acceptCharset, action, autocomplete, elements, and 294 more.ts(2322)

CodePudding user response：

If you are working with a form:

Transform this

async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    const submitter = e.nativeEvent.submitter.value;
}

To this

async function handleSubmit(e: FormEvent) {
    const submitter = e.nativeEvent.submitter.value;
}

Additionally you'll probably need to do: e.nativeEvent?.submitter.value

CodePudding user response：

I fixed it by removing the form element since it is useless with axios anyways & turned all buttons into normal buttons with onClicks that trigger the handleSubmit function.

I have it as follows:


  async function handleSubmit(e: React.SyntheticEvent<HTMLButtonElement>) {
    const submitter = (e.target as HTMLButtonElement).value;
    checkedBox.length > 0 &&
      (await axios
        .post(
          `${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
          checkedBox
        )
        .then((response) => {
          if (response.status === 200) {
            setForceUpdate((current) => (current  = 1));
          }
        })
        .catch((error) => {
          console.log(error);
        }));
  }

And the buttons as follows:

                <Button
                  type="button"
                  name="submit"
                  value="delete"
                  variant="outline-info"
                  onClick={handleSubmit}
                  size="lg"
                  className="text-center font-main-color"
                > Button </Button>