インポートされたReactコンポーネント内の要素にどのようにフォーカスできますか？

React-Search-Inputをインポートしていて、コンポーネント内に含まれているテキスト入力にプログラムで焦点を当てたいのですが、参照を含まず、入力に集中する方法もありません。インポートされたReactコンポーネント内の要素にどのようにフォーカスできますか？

そのため、要素上で.focus（）を実行しても、必要なものに焦点を当てません。これはコンポーネント内のテキスト入力です。代わりにコンテナ要素に焦点を当てます。

プロジェクトをフォークする以外にオプションはありますか？ありがとう！

出典

2016-08-30 Slbox

ReactDOM.findDOMNodeを使用して要素を取得し、最初の子にfocusを呼び出すことができます。このような何か：その後、

componentDidMount() { 
    ReactDOM.findDOMNode(this.searchInput).firstChild.focus(); 
}

とレンダリング...コードの本当に美しい小さな作品です

<SearchInput 
    className="search-input" 
    onChange={this.searchUpdated} 
    ref={(ref) => this.searchInput = ref} 
/>

出典

2016-08-30 15:09:39

。私はどのように有用なリファレンスコールバックがあるのか分かりませんでした。他の多くの方法で解決できなかった問題に対する簡単な解決策をありがとうございました。 – Slbox

残念ながら、フォーカスのために働いているにもかかわらず、私のアプリケーションの残りの部分を壊す次のエラーが発生しているようです：未知の型エラー：nullのプロパティ 'フォーカス'を読み取ることができません私はそれを得る理由フォーカスのためにうまくいく？ – Slbox

残念ながら、それは私のためにはうまくいませんでしたが、ここでは何をしましたか（正しい方向に私を指してくれてありがとう） 'componentDidMount（）{ ReactDOM.findDOMNode（this.refs.myRef）.firstChild.focus ; } ' あなたの方法が完全に私のためにはうまくいかなかった理由が分かっていれば、refコールバックを使ってもっと詳しく説明したいと思います。 – Slbox

インポートされたReactコンポーネント内の要素にどのようにフォーカスできますか？

答えて

関連する問題