Verwenden von React.findDOMNode in TypeScript

Question

Ich folge dem React Tutorial und blieb stecken, wie man React.findDOMNode verwendet.

Hier ist mein Code:

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>; 
    } 
} 

Aufruf console.log(React.findDOMNode(this.refs['author'])); gibt mir zurück <input type="text" data-reactid=".0.2.0" placeholder="Your name"> in der Konsole. Ich kann jedoch nicht herausfinden, wie der Wert des Eingabeelements abgerufen wird (was ich in das Eingabefeld eingegeben habe).

Bisher habe ich folgendes zusammen mit ein paar anderen versucht:

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 

In intellisense ich folgendes sehen kann, aber ich kann immer noch nicht herausfinden, was hier zu nennen.

Ich verwende die Typdefinitionen von DefinitedlyTyped. Ich bin auch neu in der Front-End-Entwicklung, also ist mein Ansatz vielleicht falsch.

Answer 1

Beachten Sie, dass das Lernprogramm in JavaScript und nicht in TypeScript geschrieben ist.

Allerdings habe ich die Lösung gefunden, dies richtig zu tun (OP's Antwort ist sehr umständlich). Im Grunde müssen Sie zwei Änderungen am Tutorial-Code vornehmen. Als Referenz hier ist der Code aus dem Tutorial, wie mir das Schreiben:

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

Die erste Änderung ist:

this.refs.author 

Wird

this.refs["author"] 

ich Typoskript neu bin, aber ich nehme an, dass es vorzieht, dass Sie die Indexersyntax über die Eigenschaftensyntax für Objekte verwenden, bei denen die wahren Eigenschaften nicht nach vorne deklariert werden sollen.

Zweitens und am wichtigsten ist,

React.findDOMNode 

Wird

React.findDOMNode<HTMLInputElement> 

Grundsätzlich hier müssen wir speziell Typoskript sagen welche Art von Element, das wir fordern. Verwenden Sie Ihren vollständigen Code, um eine vollständige Liste der verfügbaren Elemente zu finden. Ich nehme an, dass es alle intrinsischen Komponenten abdeckt.

Hier ist der letzte ist, arbeiten, Codezeile:

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

Der Einfachheit halber hier ist die fertige Methode bis zu dem Punkt, wo diese Methode zunächst im Tutorial erscheint (etwas zweimal Aufruf findDOMNode zu vermeiden Refactoring):

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

Referenzen in React funktioniert nicht so. Um das DOM-Element von Referenz zu erhalten, müssen Sie es auf diese Weise fragen:

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

Answer 3

EDIT: nlaq die Antwort auf meine Frage zur Verfügung gestellt, aber ich glaube, die können sich für den Leser nützlich sein, so werde ich lass diese Antwort auf.

Nach Forms | React Artikel lesen, ich war in der Lage, den Wert durch den Umgang mit den onChange Ereignis zu erwerben:

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>; 
} 

ich verwirrt bin immer noch, warum das Tutorial die Verwendung von findDOMNode zeigte. Vielleicht zeigt das Tutorial einen alten Weg? Ich bin noch neu in React. Wenn es also einen intuitiveren Weg gibt, lass es mich wissen.

Für ein vollständiges Beispiel, this SO answer hat mir geholfen.

Answer 4

Ich habe diesen Weg gefunden, um dieses Problem zu lösen.

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