TypeScriptでReact.findDOMNodeを使用

Question

私はReact Tutorialに従っていて、React.findDOMNodeの使い方に固執しました。

export class CommentForm extends React.Component<{}, {}> { 
    handleSubmit(e: React.FormEvent) { 
     e.preventDefault(); 
     console.log(React.findDOMNode(this.refs['author'])); 
    } 

    render() { 
     return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }> 
       <input type="text" placeholder="Your name" ref="author" /> 
       <input type="text" placeholder="Say something..." ref="text" /> 
       <input type="submit" value="Post" /> 
       </form>; 
    } 
} 

呼び出しconsole.log(React.findDOMNode(this.refs['author']));が私に戻って<input type="text" data-reactid=".0.2.0" placeholder="Your name"> コンソール内を与える：

は、ここに私のコードです。 しかし、入力要素の値（入力ボックスに入力したもの）を取得する方法を理解できません。

は、これまでのところ私はいくつか他の人と一緒に次のことを試してみた：インテリセンスで

React.findDOMNode(this.refs['author']).value; // "value" does not exist on type "Element" 
React.findDOMNode(this.refs['author']).getAttribute('value'); // null 
React.findDOMNode(this.refs['author']).textContent; // null 

を、私は以下を参照してくださいすることができますが、私はまだここにコールするかを把握することはできません。

私はDefinitedlyTypedの型定義を使用しています。 また、私はフロントエンドの開発に新しいので、多分私のアプローチは間違っています。

Answer 1

このチュートリアルは、TypeScriptではなくJavaScriptで書かれています。

しかし、私はこれを正しく行うための解決策を見つけました（OPの答えは非常に面倒です）。基本的には、チュートリアルコードから2つの変更を加える必要があります。

var author = React.findDOMNode(this.refs.author).value.trim(); 

最初の変更は、次のとおりです：参考のために、ここで私のようにこれを書いてチュートリアルからコードです

this.refs.author 

私は活字体に新たなんだ

this.refs["author"] 

になりは、実際のプロパティが前方宣言されていないオブジェクトの場合は、プロパティシンタックスよりもインデクサ構文を使用することをお勧めします。

第二に、そして最も重要なのは、

React.findDOMNode 

が

React.findDOMNode<HTMLInputElement> 

になりは基本的にここでは、具体的には、我々が要求している要素の種類活字体を伝える必要があります。利用可能な要素の完全なリストを見つけるには、コード補完を使用してください。私はそれがすべての内在的なコンポーネントをカバーしていると仮定します。ここで

は、コードの最後の作業、ラインである：便宜上

var author = React.findDOMNode<HTMLInputElement>(this.refs["author"]).value.trim(); 

、ここで二回findDOMNodeを呼び出す避けるために、この方法は、最初のチュートリアルに現れるポイント（少しリファクタリングまでに完了方法があります）：

handleSubmit(e: React.FormEvent) { 
    e.preventDefault(); 

    var authorInput = React.findDOMNode<HTMLInputElement>(this.refs["author"]); 
    var textInput = React.findDOMNode<HTMLInputElement>(this.refs["text"]); 

    var author = authorInput.value.trim(); 
    var text = textInput.value.trim(); 

    if (!text || !author) 
     return; 

    authorInput.value = textInput.value = ""; 
} 

Answer 2

Reactの参考文献はこのようには機能しません。

let authorElement = this.refs.author.getDOMNode(); 

Answer 3

EDIT：参照のDOM要素を取得するには、そのようにそれを依頼する必要がありnlaqは私の質問への答えを提供し、しかし、私は次のように読者のために役立つことができると思うので、私は意志この回答を残す。

Forms | React記事を読んだ後、私はonChangeイベントを処理することにより、値を取得することができました：

handleChange(e) { 
    e.preventDefault(); 
    console.log(e.target.value); // e.target.value gives the value in the input box 
} 

render() { 
    return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }> 
      <input type="text" onChange={ e => this.handleChange(e) } placeholder="Your name" /> 
      <input type="text" placeholder="Say something..." ref="text" /> 
      <input type="submit" value="Post" /> 
      </form>; 
} 

チュートリアルではfindDOMNodeの使用を示した理由は、私はまだ困惑しています。おそらくチュートリアルは古い方法を示していますか？私はまだReactには新しいので、もっと直感的な方法があれば教えてください。

完全な例として、this SO answerが私を助けました。

Answer 4

この方法でこの問題を解決しました。

const author = (ReactDOM.findDOMNode(this.refs.author) as HTMLInputElement).value;