Using React.findDOMNode in TypeScript

Question

I\'m following the React Tutorial and got stuck on how to use React.findDOMNode.

Here is my code:

export class CommentForm extends React.Com         


        

Answer 1

Note that the tutorial is written in JavaScript, not TypeScript.

However, I have found the solution to doing this properly (OP's answer is very cumbersome). Basically, you have to make two changes from the tutorial code. For reference, here is the code from the tutorial as of me writing this:

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

The first change is:

this.refs.author

Becomes

this.refs["author"]

I'm new to TypeScript, but I assume that it prefers you use indexer syntax over property syntax for objects that are meant to not have their true properties forward-declared.

Second, and most importantly,

React.findDOMNode

Becomes

React.findDOMNode

Basically here we have to specifically tell TypeScript what kind of element we are requesting. Use your code-complete to find a complete list of elements available. I assume it covers all intrinsic components.

Here is the final, working, line of code:

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

For convenience, here is the completed method up to the point where this method first appears in the tutorial (slightly refactored to avoid invoking findDOMNode twice):

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

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

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

    if (!text || !author)
        return;

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