Using React.findDOMNode in TypeScript

Question

I follow the React Tutorial and React.findDOMNode on how to use React.findDOMNode .

Here is my 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>; } } 

Call console.log(React.findDOMNode(this.refs['author'])); returns me <input type="text" data-reactid=".0.2.0" placeholder="Your name"> in the console. However, I cannot figure out how to get the value of the input element (which I entered in the input field).

So far I have tried the following along with several others:

 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, I see the following, but I still cannot figure out what to call here.

I use type definitions from DefinitedlyTyped . Also, I'm new to interface design, so maybe my approach is wrong.

Answer 1

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

However, I found the solution for this correctly (the OP answer is very cumbersome). Basically, you should make two changes from the tutorial code. For reference, here is the code from the tutorial as I write this:

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

First change:

 this.refs.author 

becomes

 this.refs["author"] 

I am new to TypeScript, but I assume that he prefers to use indexer syntax over property syntax for objects that are designed to prevent their true properties from being declared forward.

Secondly, and most importantly,

 React.findDOMNode 

becomes

 React.findDOMNode<HTMLInputElement> 

Basically here we have to specifically tell TypeScript which element we are requesting. Use the full code to search for a complete list of available items. I assume that it covers all the internal components.

Here is the final, working line of code:

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

For convenience, the above method is up to the moment when this method first appears in the tutorial (slightly reorganized to avoid calling findDOMNode twice):

 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

EDIT : nlaq provided an answer to my question, however I think the following may be useful to readers, so I will leave this an answer.

After Reading Forms | React , I was able to get the value by processing the onChange event:

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

I am still puzzled by why the tutorial shows the use of findDOMNode . Perhaps the tutorial shows the old way? I'm still new to React, so if there is a more intuitive way, let me know.

For a complete example, this SO answer helped me.

Answer 3

I found this way to solve this problem.

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

Answer 4

React links do not work this way. To get a DOM link element, you need to set it like this:

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