HOCs?

[Ellisande]

The form wrapping feels a bit weird, requires a lot of context of the inner workings of Form and its state. The result is that it'll tie your app in pretty hard, or at a minimum require you to maintain a middle-tier abstraction for it. I don't have a working implementation yet (but I'm hacking something together) but I was thinking of an API like this:

// Expect my component to have a single input, and name it
const CustomInput = ({label, name, type}) =>
  <fieldset>
    <label htmlFor={name}>{label}</label>
    <input name={name} type={type} />
  </fieldset>;

const Username = field('username')(CustomInput);

class App extends Component {
  submit(...args){
    return new Promise(ok => ok(console.log(args)) );
  }
  render() {
    return (
      <div className="App">
        <Form onSubmit={this.submit}>
          <Username label="email" name="username" type="text" />
          <FieldWrap label="Password" name="password" type="password" />
          <button type="submit">Submit</button>
        </Form>
      </div>
    );
  }
}

Then the field HOC is the only thing that knows about the context or the inner workings. It could still pass along the specialized callbacks as props, in case they want to tie those into the component but its super easy to never know about it if you don't care.

The actual implementation would have to include walking the tree to find the input(s) which is the downside, but then you assure that the attaching happens correctly and can handle common scenarios the user might not think about like the onChange they provide should probably also be executed in addition to the attached one.

[Ellisande]

Put up an example PR Link: #4