React.findDOMNode appears as undefined

Question

I have

<div id="wrapper"></div> <script type="text/jsx"> /* @jsx React.DOM*/ var Login = React.createClass({ Validate: function(){ debugger; var username = React.findDOMNode(this.refs.username).trim(); var password = React.findDOMNode(this.refs.password).trim(); console.log('Username: ' + username + '\nPassword: ' + password); if(username == 'username' && password == 'password'){ alert('Success'); } else{ alert('Failure'); } }, Clear: function(){ }, render: function(){ return( <div className="container"> Login <p></p> Username: <input type="text" ref="username" /><br /> Password: <input type="password" ref="password" /><br /><br /> <input type="button" value="Submit" onClick={this.Validate} />&nbsp;&nbsp; <input type="button" value="Clear" onClick={this.Clear} /> </div> ); } }); React.render(<Login />, document.getElementById('wrapper')) </script> 

Answer 1

React.findDOMNode was introduced in React v0.13, so be sure to use at least v0.13.

Answer 2

In reactor v0.13, use React.findDOMNode() .

In earlier versions, for example. v0.12 you can use component.getDOMNode()

 this.refs.myRef.getDOMNode(); 

To support future ES6-based templates, the React team added React.findDOMNode(component) to use instead of component.getDOMNode ().

Answer 3

Not sure when this happened, but it now seems to be in ReactDOM ReactDOM.findDOMNode .

See https://facebook.imtqy.com/react/docs/top-level-api.html#reactdom.finddomnode .

Answer 4

React.findDOMNode

outdated use

ReactDOM.findDOMNode

in React 15.1 and up

Answer 5

This may not be very relevant for the code mentioned above, however, several other checks from the respondent documents:

• "When render returns null or false, findDOMNode returns null."
• "findDOMNode cannot be used on functional components.

Hope this helps someone in need.