要求する：
モバイルプロジェクトを行う場合は、入力入力ボックスを導入します。入力入力ボックスを使用する場合は、自動的にフォーカスを取得して、モバイル端末の入力方法が自動的にポップアップ表示されるようにしたいので、ユーザーにとって便利です。
成し遂げる：
<Input
ref={
function (input) {
if (input != null) {
input.focus();
}
}}
/>
なぜ
React.jsでは、基本的にDOMを直接処理する必要はありません。React.jsは、イベントの監視に役立つ一連のon *メソッドを提供するため、React.jsでaddEventListenerのDOM APIを直接呼び出す必要はありません。以前は、手動のDOM操作を使用してページを更新していました（たとえば、 、jQueryの助けを借りて）、しかしReact.jsでは。jsでは、コンポーネントはsetStateを介して直接再レンダリングでき、ページの効果を実現するために、レンダリング中に新しい小道具を子コンポーネントに渡すことができます。更新。
React.jsの再レンダリングメカニズムは、ほとんどのDOM更新操作を回避するのに役立ちます。また、主にDOM操作をカプセル化するjQueryなどのサードパーティライブラリを開発ツールチェーンから削除することもできます。
しかし、React.jsはすべてのDOM操作要件を完全に満たすわけではありません。それでもDOMを処理する必要がある場合があります。たとえば、ページに入った後に入力ボックスに自動的にフォーカスする場合は、input.focus（）のDOM APIを呼び出す必要があります。たとえば、後続のアニメーション用にDOM要素のサイズを動的に取得する必要があります。等々。
React.jsは、マウントされた要素のDOMノードを取得するのに役立つref属性を提供します。ref属性をJSX要素に追加できます。
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={
(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
input要素にref属性を追加し、属性値が関数であることがわかります。入力要素がページにマウントされると、React.jsはこの関数を呼び出し、マウントされたDOMノードをこの関数に渡します。この関数では、このDOM要素をコンポーネントインスタンスの属性として設定し、将来this.inputを介してこのDOM要素を取得できるようにします。
次に、componentDidMountでこのDOM要素を使用して、this.input.focus（）のDOMAPIを呼び出すことができます。全体として、ページの読み込みが完了すると、入力ボックスに自動的にフォーカスする機能（componentDidMountのコンポーネントライフサイクルを使用していることがわかります）。
代表的なHTML要素タグにrefを追加して、そのDOM要素を取得し、DOMAPIを呼び出すことができます。ただし、1つの原則を覚えておいてください。refを使用できる場合は使用しないでください。特に、refを使用して、React.jsがすでに実行できる自動ページ更新操作とイベント監視を実行することは避けてください。過剰なDOM操作は、実際にはコード内の「ノイズ」であり、理解と保守に役立ちません。
ちなみに、実際には次のようにコンポーネントタグにrefを追加できます。
<Clock ref={
(clock) => this.clock = clock} />
このようにして、React.js内で初期化されたこのClockコンポーネントのインスタンスを取得します。ただし、これは一般的な方法ではなく、推奨されないため、ここで簡単に説明します。興味のある友人は、自分で学習して探索することができます。
