Skip to content

Instantly share code, notes, and snippets.

@quinn

quinn/Form.js

Last active July 9, 2018 12:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save quinn/b383070691bb9a32b675152aabdada41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save quinn/b383070691bb9a32b675152aabdada41 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. quinn revised this gist Jul 9, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@ export class Form extends React.PureComponent {

    export const Input = ({ name }) =>
    <FormContext.Consumer>
    {({ value, update }) =>
    <input onChange={({ target }) => update(name, target.value)} />
    {({ formState, update }) =>
    <input onChange={({ target }) => update(name, target.value)} value={formState[name]} />
    }
    </FormContext.Consumer>
  2. quinn revised this gist Jul 9, 2018. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion Form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,9 +17,12 @@ export class Form extends React.PureComponent {
    }))
    }

    onSubmit = () =>
    this.props.onSubmit(this.state.formState)

    render () {
    return <FormContext.Provider value={this.state}>
    <form onSubmit={this.props.onSubmit}>
    <form onSubmit={this.onSubmit}>
    {this.props.children}
    </form>
    </FormContext.Provider>
  3. quinn created this gist Jul 9, 2018.
    34 changes: 34 additions & 0 deletions Form.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    import React from 'react'

    const FormContext = React.createContext({
    formState: {},
    update: () => {},
    })

    export class Form extends React.PureComponent {
    state = {
    formState: {},
    update: (name, value) =>
    this.setState(state => ({
    formState: {
    ...state.formState,
    [name]: value,
    }
    }))
    }

    render () {
    return <FormContext.Provider value={this.state}>
    <form onSubmit={this.props.onSubmit}>
    {this.props.children}
    </form>
    </FormContext.Provider>
    }
    }

    export const Input = ({ name }) =>
    <FormContext.Consumer>
    {({ value, update }) =>
    <input onChange={({ target }) => update(name, target.value)} />
    }
    </FormContext.Consumer>