Created
February 27, 2018 22:22
-
-
Save philipmjohnson/6e66b117e77b1e74f62d6e7c17162bf3 to your computer and use it in GitHub Desktop.
Clear form after submit in Uniforms using ES6 React.Component
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 { Stuff, StuffSchema } from '/imports/api/stuff/stuff'; | |
| import { Grid, Segment, Header } from 'semantic-ui-react'; | |
| import AutoForm from 'uniforms-semantic/AutoForm'; | |
| import TextField from 'uniforms-semantic/TextField'; | |
| import SelectField from 'uniforms-semantic/SelectField'; | |
| import SubmitField from 'uniforms-semantic/SubmitField'; | |
| import ErrorsField from 'uniforms-semantic/ErrorsField'; | |
| import { Bert } from 'meteor/themeteorchef:bert'; | |
| import { Meteor } from 'meteor/meteor'; | |
| /** Renders the Page for adding a document. */ | |
| class AddStuff extends React.Component { | |
| /** Bind 'this' so that a ref to the Form can be saved in formRef and communicated between render() and submit(). */ | |
| constructor(props) { | |
| super(props); | |
| this.submit = this.submit.bind(this); | |
| this.render = this.render.bind(this); | |
| this.formRef = null; | |
| } | |
| /** On successful submit, insert the data. */ | |
| submit(data) { | |
| const { name, quantity, condition } = data; | |
| const username = Meteor.user().username; | |
| Stuff.insert({ name, quantity, condition, username }, (error) => (error ? | |
| Bert.alert({ type: 'danger', message: `Add failed: ${error.message}` }) : | |
| Bert.alert({ type: 'success', message: 'Add succeeded' }))); | |
| this.formRef.reset(); | |
| } | |
| /** Render the form. Use Uniforms: https://github.com/vazco/uniforms */ | |
| render() { | |
| return ( | |
| <Grid container centered> | |
| <Grid.Column> | |
| <Header as="h2" textAlign="center">Add Stuff</Header> | |
| <AutoForm ref={(ref) => this.formRef = ref} schema={StuffSchema} onSubmit={this.submit}> | |
| <Segment> | |
| <TextField name='name'/> | |
| <TextField name='quantity'/> | |
| <SelectField name='condition'/> | |
| <SubmitField value='Submit'/> | |
| <ErrorsField/> | |
| <TextField name='username' type='hidden' label={false} value='fakeuser@foo.com'/> | |
| </Segment> | |
| </AutoForm> | |
| </Grid.Column> | |
| </Grid> | |
| ); | |
| } | |
| } | |
| export default AddStuff; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment