'yes/no'質問インターフェイスを使用して反応するアプリケーションがあります。私はreduxを使って状態を管理しています。React + Redux：入力フォーカスをプログラム的に変更する
このアプリでは一連の入力フィールドが表示され、動的に追加されます。高速なデータ入力を可能にする - 質問が「Y」または「n」のキーストロークと回答された場合
、私はシリーズの次の入力が自動的に焦点を当てる取得したいです。これは驚くほど困難であることが証明されています！
私のreduxストアには現在の質問のインデックスが含まれています - これはその入力に焦点を当てるようにします。
/*Input Component*/
const quizQs = ({
questionArray = ["Q1", "Q2", "Q3", "Q4"]
currentQIndex, //From Store
changeQIndex, //Action
}) => {
const _handleKeyDown = (e) => {
if(e.key == 'y' || e.key == 'n'){
//Dispatches Action that increases current currentQIndex'
}
}
//_handleFocus()... for updating currentQIndex if an input is focused by the user
return (
{questionArray.map((q, index) => {
return(
<input
key={index}
onKeyDown={_handleKeyDown}
onFocus={_handleFocus}
type="text"
placeholder={q}
/>
)
})}
)
}
/*Main Component -- Connected to Store*/
class myQuiz extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<div>
<quizQs
currentQIndex = {this.props.currentQIndex}
changeQIndex = {this.props.changeQIndex}
/>
</div>
)}
}
店の'currentQIndex'は'quizQs'コンポーネントでは、その特定の問題のインデックスと一致した場合、私は、autoFocus = trueを設定しようとしています。このメソッドは、ページの最初のレンダリング時に指定されたフィールドにフォーカスを当てることができますが、ストアの'currentQIndex'が変更されてもフォーカスは変更されません。の変化に対応
私は答えを探してきたように、コールバックの'refs' +使用が移動するための方法、（https://reactjs.org/docs/refs-and-the-dom.html#the-ref-callback-attribute）のように見えるだろうが、私は、このような'focus'コールバックを設定する方法を見つけ出すことはできません反応して、 Reduxストア。
さらに、Refsを使用するには、コンポーネントを矢印関数ではなくクラスとして設定する必要があります。 AFAIKでは、1つのファイルに複数のクラスを持たせるのは良い方法ではなく、非常に多くの異なるコンポーネントをレキシックスストアに接続することは適切ではないようです。
私は助けていただきありがとうございます。ここで