flowのSyntheticFocusEventにはtarget propertyはない

flow 技術

やりたかったこと

ユーザーがフォームに入力をして、フォーカスが外れたタイミングで stateを更新するってのをhooksで書こうとしてました

cosnt [state1, setState1] = useState<string>('');

function _onBlurHandler(event: SyntheticFocusEvent) {
    setState1(event.targe.value);
 }

<input
    ...
    ...
    onBlur={_onBlurHandler}
    )}
/>

だったんですがflowで型チェックしたら怒られちゃいました

Cannot get event.target.value because property value is missing in EventTarget

Githubを見に行こう

このissueで結構話されてました↓

property value not found in EventTarget · Issue #2099 · facebook/flow · GitHub

I don't see value declared in EventTarget.

まあこれにつきますよね

SyntheticFocusEvent (issueではSyntheticKeyboardEvent)ではtargetというpropertyはdefaultではないのでEventTargetを宣言してあげる必要があります

github.com

targetがHTMLInputElementであることを宣言します

cosnt [state1, setState1] = useState<string>('');

function _onBlurHandler(event: SyntheticFocusEvent) {
    if (event.target.value instanseof HTMLInputElement) {
        setState1(event.targe.value);
    }
 }

<input
    ...
    ...
    onBlur={_onBlurHandler}
    )}
/>

これでエラーは消えました！めでたい！！