入力の値がコンポーネント階層の奥深くにある場合、その値にアクセスするにはどうすればよいですか？

Question

私は私の「InputBox関数は、」私は、フォームを実行するために、私のコンテナコンポーネントで入力の値を取得したいと思いプレゼンテーションコンポーネント

<input type="text" id="inputBox" ref="inputBox" name="inputBox" value={this.state.inputVal} onChange={this.handleChange} /> 

であるコンポーネント3つのレベルの深<Foo><Bar><InputBox/><Bar></Foo>を反応させるのにコードの下に持っている、と言うことができます検証。私は私がどのアプローチ知っていただきたいと思い

this.refs.inputBox.value 

（私の参照文献は非常に深いときしかし、以下のいずれかが動作しません）バニラJS

document.getElementById('inputBox').value 

またはREFを反応させるの使用のいずれかを使用して値を取得することができますパフォーマンス面で優れているのはなぜですか？ Reactのrefアプローチを使用してコンポーネント階層の奥深くにある場合、入力の値にアクセスする方法を知りたいですか？

Answer 1

私はこれにinnerHTMLを使用します。

var input = document.GetElementByID('inputBox').innerHTML; 

この入力変数を使用して検証を行うことができるようになりました。

Answer 2

refsを使用してください。しかし...

文字列リファレンスは非推奨ではありませんが、それらはレガシーと見なされますが、将来はいつでも廃止予定です。コールバック の参照が優先されます。 - FB https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

ので、代わり<input ref={el => this.inputEl = el} />ような何かをしてthis.inputEl.valueとしての価値にアクセスします。

いくつかのマイナーなポイント：

• input="text"は必要ありません。それは、彼らが十分にスケーリングしていない、
• はIDを避け、デフォルトです（例えばページ内の別の場所で別の要素は、同じIDを与えられている場合は、無効なHTML持っている）、プレーンDOMのためのgetElementByIdを対findDOMNode [の