2016-04-12 8 views
4

私のreact-reduxベースのフォームには、フォームをリセットするボタンがあります。フォーカスを最初の入力フィールドに戻します。
コンテンツをリセットすることはまっすぐな還元状態ですが、フォーカスに問題があります。react:クリックハンドラからフォーカスを設定する方法

最初のフィールドのautoFocusは、最初のレンダリングでのみ機能します。それを再トリガーするための元気な方法はありますか?

明示的なelement.focus()を使用する必要がある場合は、どこから呼び出す必要がありますか?私は反応還元型を使用していますが、還元型は使用していません。

答えて

2

ページ読み込みにどの要素が重点を置くべきかを知るためにいくつかの情報を保管していますか?いいえ?その後、なぜそれをやるべきなのですか?

トリガーelement.focus()アクションをディスパッチした直後 - これを達成するためにReduxは必要なく、この状態を保存するためにReduxも必要ありません。

擬似コードは、あなたが使用することができます。この

onReset() { 
    const action = { 
    type: RESET_FORM, 
    } 
    dispatch(action); 

    const element = getElement(); // propably read ref? Find element with [autoFocus] attribute in component? 
    element.focus(); 
} 
+0

私の元MOビュークラスを純粋なダムのレンダリングコードに制限し、ビヘイビア/状態変更コードがなく、レンダリングとは独立してすべての状態ロジックをテストすることができました。デフォルトのフォーカス処理(アプリケーション状態を通過しない)との違いは、コードで明示的に操作されることです。しかし、もっと具体的なアプローチがこの特定の問題に最適であり、すべてのフォーカスコントロールをアプリコードに移動することは現実的ではなく、望ましいことではないかもしれません。 –

0

次のようになります。

document.getElementById("ElementName").focus(); 
ここ

最終的なコード:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 

 
<script> 
 
function change() { 
 
    document.getElementById("two").focus(); 
 
} 
 
</script> 
 
</head> 
 

 

 

 
<body> 
 
    <input type="radio" name="name" id="name" onchange="change()" /> 
 

 
    <input type="text" name="one" id="one" /> 
 
    <input type="text" name="two" id="two" /> 
 
</body> 
 
</html>

+1

質問に記載されているように、私はelement.focus()について知っています。私の関心は、物事を行う反応/還元方法にどこに(または)それが適合するかであった。それをinput.onChangeから呼び出すことは、記述された課題に対して間違いです。 –

+0

大丈夫です。わかった。 – aghilpro

関連する問題