New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React.FormEventHandler<HTMLElement> or React.ChangeEvent for Input? #3372
Comments
Update: I haven't been able to get |
Hey, @havesomeleeway I think there is one misconception you have -
Note, that type
But I'll recommend you to go with first solution. Also, note that you should use |
At work at the moment but i'll have a deeper look and thought into your answer once I head home this evening. Thanks! |
@jacekjagiello Why would you recommend the first solution as opposed to the second one from a technical point of view? |
Actually, according to
I think as a general rule it's better to add type to the whole function, rather than to individual arguments. This empowers reusability and pays off when you have a function that has multiple arguments. interface Item {
label: string
value: string
}
class App extends React.PureComponent<{}, {}> {
render() {
const items: Item[] = [
{ label: 'First item', value: 'first' },
{ label: 'Second item', value: 'second' },
{ label: 'Third item', value: 'third' }
]
return <Select items={items} itemRenderer={this.renderItem} onItemSelect={console.log} />
}
// type for function
// - no need to specify type for each of the arguments
// - you know execaly the type of renderItem function - more reable, better for docs
// - reusable, you can add ItemRenderer to other functions, and they reamin consistent to single type
private renderItem: ItemRenderer<Item> = (item, itemProps) => {
return <MenuItem text={item.label} onClick={itemProps.handleClick} />
}
// type only for argument
// need to specify type for each of the arguments
private renderItem = (item: Item, itemProps: IItemRendererProps) => {
return <MenuItem text={item.label} onClick={itemProps.handleClick} />
}
} |
https://www.typescriptlang.org/docs/handbook/functions.html Had a good read of this and I better understand what you are saying! Thanks! |
Environment
"@blueprintjs/core": "^3.11.0",
Google Chrome: Version 71.0.3578.98 (Official Build) (64-bit)
OS: Mojave 10.14.2
Question
Over at the Text Input Component,
it is stated that the
props
foronChange
should be:However when I try to use
React.FormEventHandler
for myhandleChange
function, this shows up:There's a vague answer on stackoverflow which describes
However, it does not explain why ChangeEvent is more suitable for typing form events.
Using
React.ChangeEvent
, the warning goes away. I am now able to edit my input fields on the UI.My questions are:
ChangeEvent
orFormEventHandler
for my input?FormEventHandler
as suggested by the documentation on Blueprint, how do I deal with the warningTS2339: Property 'target' does not exist on type '(event: FormEvent<HTMLInputElement>) => void'.
React.ChangeEvent
, should we updateIControlledProps.onChange
?My component code is straight forward
The text was updated successfully, but these errors were encountered: