Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 708
user544079 Avatar asked Mar 29 '15 23:03

user544079


People also ask

How do you define ReactDOM?

ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.

Which component do we have to pass to the ReactDOM render () method?

render() The first argument is the element or component we want to render, and the second argument is the HTML element (the target node) to which we want to append it. Generally, when we create our project with create-react-app , it gives us a div with the id of a root inside index.

How does ReactDOM render work?

The ReactDOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

How do I get rid of the DOM element in React?

Pass the remove() as a props and call the remove() onClick with the id and apply filter.. Hope it helps!


1 Answers

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

like image 92
Felix Kling Avatar answered Oct 27 '22 09:10

Felix Kling