Last active
December 11, 2018 22:47
-
-
Save siakaramalegos/b3c650429dcbb0f480ccbdf64f013dd3 to your computer and use it in GitHub Desktop.
Basic uncontrolled inputs using form serialization to get data from form
This file contains 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, { Component } from 'react' | |
// Import the serialize function from the form-serialize package | |
import serialize from 'form-serialize' | |
export default class UncontrolledSerialized extends Component { | |
onSubmit = (e) => { | |
e.preventDefault() | |
// Usually, we would pass the final input values to a function that | |
// would do something with the data like persist it to a database. | |
// Using serialization, we just need to pass that function the | |
// serialized form body. | |
const form = e.currentTarget | |
const body = serialize(form, {hash: true, empty: true}) | |
console.log(body) | |
} | |
render() { | |
// Let's see when re-renders happen. | |
console.log('render!') | |
return ( | |
<form onSubmit={this.onSubmit}> | |
<h1>Uncontrolled Inputs + Form Serialization Example</h1> | |
<label> | |
Name | |
<input name="firstName" /> | |
</label> | |
<label> | |
Spirit Animal | |
<input name="spiritAnimal" /> | |
</label> | |
<button>Submit</button> | |
</form> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment