It seems that some components like to pass an event as the first (or only) argument for a change event, eg (the native input, Material-UI's TextField) and then the programmer accesses the value with event.target.value
, while other components will pass the value itself as the first arguement (eg. react-date-picker).
Here's a codepen demonstrating this: https://codesandbox.io/s/modern-cache-u8in9.
Where this becomes relevant is if I'm using a library like Formik, which has a handleChange
handler which expects to be passed React.ChangeEvent
objects, which it'll then look at for either an id or name, and a value.
So if I'm building some kind of complicated application that uses different components from different sources, then it's nice it would be nice to be able to handle their onChange
events in a single way, rather than having to write different onChange handlers for different components.
What I was thinking is that one could make all of their onChange handles have a signature of something like:
(event?: React.ChangeEvent<any (or T?)>, value?: U, fieldName?: string) => void;
And that way, someone can use the component either the Formik way (where the first argument will be accessed, or the 'just pass the value' way, by accessing the second argument).
Is there any terms or established concepts that deal with this kind of thinking?