Last active
October 21, 2019 15:41
-
-
Save vicradon/ea41370bfcb1fae9a20a9e0314309f7a to your computer and use it in GitHub Desktop.
A simple example of React Forms
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The main info to grab here is that the function which handles event.target can be placed | |
| //on multiple elements. The props of that element get combined into an object which can | |
| //be accessed form event.target. Remember how NetNinja accessed inputs of a form using '[]'? | |
| //The same logic is applied here. The name is accessed using [] and the value, the normal way | |
| //The name must reflect the property in state. because name is carried from the JSX element and | |
| //sent to the state for investigation | |
| import React from "react" | |
| class App extends React.Component { | |
| constructor() { | |
| super() | |
| this.state = { | |
| firstName: '', | |
| lastName: '', | |
| messageToTheWorld:'' | |
| } | |
| this.handleChange = this.handleChange.bind(this) | |
| } | |
| handleChange(event) { | |
| const {name, value} = event.target; | |
| this.setState({[name]:value}) | |
| } | |
| render() { | |
| return ( | |
| <div> | |
| <input name='firstName' type="text" placeholder='first name' value={this.state.firstName} onChange={this.handleChange} /> | |
| <br /> | |
| <input name='lastName' type="text" placeholder='last name' value={this.state.lastName} onChange={this.handleChange} /> | |
| <textarea name = 'messageToTheWorld' placeholder = 'type your message to the world' value = {this.state.messageToTheWorld} onChange={this.handleChange}></textarea> | |
| <h4>First Name is: {this.state.firstName} </h4> | |
| <h4>Last Name is :{this.state.lastName}</h4> | |
| <h4>Message to the world is :{this.state.messageToTheWorld}</h4> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default App |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="index.pack.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react" | |
| import ReactDOM from "react-dom" | |
| import App from "./App" | |
| ReactDOM.render(<App />, document.getElementById("root")) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment