This is the sixth part of the video series on React JS.
We discuss accessing UI components and event handling in React JS. Let’s continue with the login form we built in the previous post.
The example used in the video is given below
<html> <head> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <!--Let's build a login form--> <div id="root"></div> <script type="text/jsx"> class LoginForm extends React.Component { constructor(props) { super(props); //Works with the latest version of React this.username = React.createRef(); this.password = React.createRef(); } loginButtonClicked() { //Access username and password textboxes //NOT RECOMMENDED // let userName = document.getElementById("username").value; // let password = document.getElementById("password").value; let userName = this.username.current.value; let password = this.password.current.value; console.log(userName, password); } render() { return (<div> <input type="text" placeholder="User name" ref={this.username}/> <br/> <input type="password" placeholder="Password" ref={this.password}/> <br/> <button onClick={this.loginButtonClicked.bind(this)}>Login</button> </div>); } } ReactDOM.render(<LoginForm/>, document.getElementById("root")); </script> </body> </html>
You can find the video here.
Read and watch the other parts here.
1. | Hello ReactJS without JSX |
2. | Hello ReactJS with JSX |
3. | Let’s play with JSX – Part I |
4. | Let’s play with JSX – Part II |
5. | Creating Components – Part I |