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} />
<input type="button" value="Clear" onClick={this.Clear} />
</div>
);
}
});
React.render(<Login />, document.getElementById('wrapper'))
</script>
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.
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.
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.
Pass the remove() as a props and call the remove() onClick with the id and apply filter.. Hope it helps!
React.findDOMNode
was introduced in React v0.13, so make sure you are using at least v0.13.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With