CODEWITHSUNDEEP
javascriptjqueryreactjs
user544079
user544079

Reputation: 16629

React.findDOMNode comes as undefined

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>

Upvotes: 7

Views: 11709

Answers (5)

Coding Duchess
Coding Duchess

Reputation: 6909

React.findDOMNode

has been deprecated, use

ReactDOM.findDOMNode

in React 15.1 and up

Upvotes: 3

Prakash Tiwari
Prakash Tiwari

Reputation: 2429

This might not be very relevant for the code mentioned with the question above, however a couple of other checks from react's docs are:

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

Hope this helps someone in need.

Upvotes: 0

Victor H&#228;ggqvist
Victor H&#228;ggqvist

Reputation: 4486

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

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

Upvotes: 6

svnm
svnm

Reputation: 24348

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

In earlier versions e.g. v0.12 you can use component.getDOMNode()

this.refs.myRef.getDOMNode();

To support ES6 based patterns going forward, the React team added React.findDOMNode(component) to be used in place of component.getDOMNode().

Upvotes: 6

Felix Kling
Felix Kling

Reputation: 816610

React.findDOMNode was introduced in React v0.13, so make sure you are using at least v0.13.

Upvotes: 10

Related Questions