onBlurを使用してReactコンポーネントのフォーカスを設定する

Question

ロジックがターゲット要素にフォーカスを戻す（およびTypeScriptでこれを書き込む）ReactコンポーネントにonBlurイベントハンドラを添付しました。

emailBlur(e: React.FocusEvent<HTMLInputElement>) { 
    e.currentTarget.focus(); 
    e.preventDefault(); 
    // re-ordering these statements makes no difference 
} 

これは

<input type="email" onBlur={this.emailBlur} /> 

さらに、コンストラクタは

this.emailBlur = this.emailBlur.bind(this); 

が含まれています。しかし、フォーカスが設定れることは決してありませんバインドされている - 私は、別の要素にターゲット要素からフォーカスを決してクリックしない場合をターゲット要素に戻ります。

なぜターゲット要素にフォーカスが戻っていないのですか？

Answer 1

あなたはe.currentTargetと、このようなタイムアウトを使用してみましたfocusのでblurが完了する前に？

e.preventDefault(); 
const target = e.currentTarget; 
setTimeout(
    function() { 
     target.focus(); 
    }, 
    5 
); 

Answer 2

Why isn't the focus being set back to the target element?

使用setTimeoutもう一度