Correct from element handlers and add test (#21511)

types/react-onsenui/index.d.ts

@@ -222,20 +222,20 @@ export class Fab extends Component<{
     ripple?: boolean,
     position?: string,
     disabled?: boolean,
-    onClick?(): void,
+    onClick?: React.MouseEventHandler<HTMLButtonElement>,
 }, any> {}
 
 export class Button extends Component<{
     modifier?: string,
     disabled?: boolean,
     ripple?: boolean,
-    onClick?(e?: Event): void
+    onClick?: React.MouseEventHandler<HTMLButtonElement>,
 }, any> {}
 
 export class Input extends Component<{
     modifier?: string,
     disabled?: boolean,
-    onChange?: React.ChangeEvent<any>,
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
     value?: string,
     checked?: boolean,
     placeholder?: string,
@@ -247,13 +247,14 @@ export class Input extends Component<{
 
 export class Range extends Component<{
     modifier?: string,
-    onChange?(e: Event): void,
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
     value?: number,
     disabled?: boolean,
 }, any> {}
 
 export class Switch extends Component<{
-    onChange?(e: Event): void,
+    modifier?: string,
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
     checked?: boolean,
     disabled?: boolean,
     inputId?: string
@@ -308,7 +309,7 @@ export class ListItem extends Component<{
     tappable?: boolean,
     tapBackgroundColor?: string,
     lockOnDrag?: boolean,
-    onClick?: React.MouseEventHandler<any>,
+    onClick?: React.MouseEventHandler<HTMLUListElement>,
 }, any> {}
 
 export class Card extends Component { }

types/react-onsenui/react-onsenui-tests.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { SplitterSide, Splitter, SplitterContent, Page } from "react-onsenui";
+import {
+    SplitterSide, Splitter, SplitterContent,
+    Page, Input, Button,
+} from "react-onsenui";
 
 class AppState {
     isOpen = false;
@@ -34,6 +37,8 @@ export class App extends React.Component<AppProps, AppState> {
                 <SplitterContent>
                     <Page>
                         Test page
+                        <Input name='test' type='text' value='test' onChange={onChange} />
+                        <Button onClick={onClick} />
 					</Page>
                 </SplitterContent>
             </Splitter>
@@ -42,3 +47,6 @@ export class App extends React.Component<AppProps, AppState> {
 }
 
 ReactDOM.render(<App />, document.getElementById('react-body'));
+
+function onChange(event: React.ChangeEvent<HTMLInputElement>) { }
+function onClick(event: React.MouseEvent<HTMLButtonElement>) { }