|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import { useState } from 'haunted'; |
|
|
|
import { useState, useCallback } from 'haunted'; |
|
|
|
|
|
|
|
|
|
|
|
type FormField = [ |
|
|
|
type FormField = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
@ -7,18 +7,22 @@ type FormField = [ |
|
|
|
'.value': string; |
|
|
|
'.value': string; |
|
|
|
'@change': (e: any) => void; |
|
|
|
'@change': (e: any) => void; |
|
|
|
}, |
|
|
|
}, |
|
|
|
(value: string) => void |
|
|
|
ReturnType<typeof useState>[1] |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
export const useFormField = (name: string, defaultValue = ""): FormField => { |
|
|
|
export const useFormField = (name: string, defaultValue = ""): FormField => { |
|
|
|
const [value, setValue] = useState(defaultValue); |
|
|
|
const [value, setValue] = useState(defaultValue); |
|
|
|
|
|
|
|
const changeHandler = useCallback((e: any) => { |
|
|
|
const changeHandler = (e: any) => { |
|
|
|
|
|
|
|
setValue(e.target.value); |
|
|
|
setValue(e.target.value); |
|
|
|
}; |
|
|
|
}, [setValue]); |
|
|
|
|
|
|
|
|
|
|
|
return [ |
|
|
|
return [ |
|
|
|
{ name, type: "text", '.value': value, '@change': changeHandler }, |
|
|
|
{ |
|
|
|
|
|
|
|
name, |
|
|
|
|
|
|
|
type: "text", |
|
|
|
|
|
|
|
'.value': value, |
|
|
|
|
|
|
|
'@change': changeHandler |
|
|
|
|
|
|
|
}, |
|
|
|
setValue |
|
|
|
setValue |
|
|
|
]; |
|
|
|
]; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|