Approach Suggestion Request

[zeroasterisk]

I've been working with the awesome onSubmitSuccess() and returned promise from formRef.submit() which was introduced after #51 --- excellent.

But I have run into issues where I want to create a form and pass the formRef into it's child elements... for example, a submit button child component.

The issue is the formRef is null, it gets set when AutoForm creates it, but it doesn't get passed into the child elements because they are not yet instantiated... null gets passed.

example:

let formRef = null;
return (
    <AutoForm
      ref={ref => formRef = ref}
      model={props.bucket}
      schema={props.schema}
      onSubmit={props.handleSubmitBuckets}
      grid={3}
    >
      <div className="card-block">
        <BucketEditer {...props} />
      </div>
      <div className="card-footer">
        <div className="text-xs-right">
          <SubmitBtn formRef={formRef} />
          <SubmitAndContinueBtn formRef={formRef} />
      </div>
    </div>
  </AutoForm>
)  

I suppose I could set formRef into the parent component state, which would trigger an update, and set it to child components explicitly...

Is there a simpler strategy?

What I'd like is, maybe, a function imported from the uniforms package which basically could find and return the formRef, from anything inside the form... I have no idea how this could be accomplished, and probably can't... The submit button is obviously not an input, it is not initiated with a connectField but I suppose we could have a connectComponent to tie "whatever" to the formRef, and thereby, with API access to the form.

Thoughts?

[zeroasterisk]

Here's my new workaround, a HOC to handle that formRef in state

/**
 * A wrapper for AutoForm which stores the formRef in state and
 * passes back into the form
 */
export default function HOCformable(Component) {
  const klass = class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { formRef: null };
      this.setFormRef = this.handleFormRef.bind(this);
    }
    handleFormRef(formRef) {
      if (formRef && !this.state.formRef) {
        this.setState({ formRef });
      }
    }
    render() {
      return <Component
        {...this.props}
        formRef={this.state.formRef}
        setFormRef={this.setFormRef}
      />;
    }
  };
  klass.displayName = `Formable(${Component.name})`;
  return klass;
}

[radekmie]

Before I answer... Why you have to pass your form ref down?

[zeroasterisk]

Because I may have a sub-Component do the formRef.submit() --> Promise triggering

[radekmie]

Okay, that makes sense. Currently, I don't have a better idea than some variation of your HOC, but if I do - I'll post it here.

[zeroasterisk]

sounds good - thanks!