score:1
you can use react.formevent
as the type of the event
parameter:
import react, { formevent } from "react";
// ...
const handlesubmit = (event: formevent) => {
event.preventdefault();
// ...
};
react has its own synthetic event types for the various events, which you use when setting up the handler the way you are, with an onxyz
property on the element. (when setting up a handler via addeventlistener
, which is still sometimes necessary, it's important not to use react's synthetic event types, since you're not setting up a react event handler, you're setting up a dom event handler. but with the way you're doing it, you want the synthetic type.)
you could type the function itself as a formeventhandler<htmlformelement>
:
import react, { formevent } from "react";
// ...
const handlesubmit: formeventhandler = (event) => {
event.preventdefault();
// ...
};
note that both formevent
and formeventhandler
are generic types, accepting a type argument for the type of element that target
will be. the default is element
, which is often sufficient, but you could also supply htmlformelement
(e.g., formevent<htmlformelement>
) if you wanted to be more thorough.
score:0
you can assign a type to either to the function itself or to the arguments of the function, which is the event.
react.formeventhandler<htmlformelement>
this is the type for the function. if you use it like this:
handlesubmit: react.formeventhandler<htmlformelement> = e => {
}
then the type for the variable e will be inferred as react.formevent automatically. so you don't actually need to know the event type because you can apply a type to the function itself and get the correct type.
or you can assign the type to the event argument e.
handlesubmit = (e: react.formevent<htmlformelement>) => {
}
now the type for the handlesubmit property is inferred as (e: react.formevent<htmlformelement>) => void.
Source: stackoverflow.com
Related Query
- How to type less verbosely
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- Typescript: How to add type check for history object in React?
- How to type an exported RelayContainer
- How can I disable all typescript type checking?
- How to specify null prop type in ReactJS?
- How to display a image selected from input type = file in reactJS
- How to type a Form component with onSubmit?
- How do I create a TypeScript type definition for a stateless React component?
- How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
- How to resolve ' error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.'?
- How to make script type both text/babel and module?
- how to solve this error You may need an appropriate loader to handle this file type
- How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)?
- React.js - How to set a default value for input date type
- How to do flow type annotations for React hooks (useState, etc.)?
- How to set React default props for object type
- how to import LESS files from specific path using webpack less-loader?
- How to use a select input type with redux-form?
- how to type state and dispatch for useReducer - typescript and react
- How to describe type scroll events?
- How do you set the Typescript type for useRef hook in React Native?
- How can I read Less variables in Javascript?
- Typescript: how to set type of children in React Component?
- Semantic-UI React: How to theme using less variables in a create-react-app project
- ReactJS How to add a show more/show less button
- how to use a type for the response from axios.get
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- how to define ref type by flowtype?
- How to use LESS preprocessor in React Create-React-APP
More Query from same tag
- Promise {<pending>} of bcrypt inside promise
- Uncaught TypeError: Cannot read property 'map' of undefined with React
- The values iterated by .map() do not reflect inside the function in html attribute
- How to filter by NULL with ra-data-hasura
- am fetching data from firebase but authData is empty when the app renders once
- How to change active tab color in MUI?
- Parsing JSON into HTML
- I can't figure out why I am getting the following error "Error: Element type is invalid:"
- New compilation errors with react-addons-test-utils
- Unwanted return to login when I refresh the page?
- Why am I getting: TypeError: _axios.default.get.mockResolvedValue is not a function
- React Hooks: how to wait for the data to be fetched before rendering
- How to redirect to new page in React
- req.users undefined react express
- Unhandled Runtime Error TypeError: Cannot read property 'items' of undefined (Next.js, React, AWS)
- React admin select input default empty value
- How to pass data from render method to multiple components in React?
- How can I check a click on a child component using jest, if the callback isn't passed as prop?
- TypeError: [setState with createContext] is not a function - React
- Changing classname of a specific element on click from a mapped array an keeping the same classname until clicked again in react
- "Type '{ children: Element[]; pictureUrl: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'
- React state repeatedly reverts back to old value
- TypeError: Cannot read property 'validateName' of undefined
- Fake timers doesn't work with latest version of user-event?
- How to pass props to a component passed as props in React?
- Checking value of drop down is not in another drop down. Custom Validation using YUP
- How do I clone a JavaScript object?
- How to style function-plot.js
- AnchorEL component is invalid after a method is called the first time
- How do I add transition effects to each image coming from props onClick?