React-redux-form: How to manually submit the form?

Created on 29 Jun 2016 · 7Comments · Source: davidkpiano/react-redux-form

I have a form which does not use <button type="submit"> to avoid submitting the form when the user presses the Enter key.

I tried putting ref on the Form component

<Form ref="myForm">

then calling this.refs.myForm.submit() upon clicking the button throws this error:

_this.refs.myForm.submit is not a function

Is there any way to manually submit the form through this? Thanks

Source

mewben

Most helpful comment

Now there is!

class App extends React.Component {
  attachNode(node) {
    this._form = findDOMNode(node);
  }
  handleClick() {
    this._form.submit();
  }
  handleSubmit() {
    // ...
  }
  render() {
    return (
      <div>
        <Form
          model="test"
          onSubmit={this.handleSubmit.bind(this)}
          ref={this.attachNode.bind(this)}
        >
          <Field
            model="test.foo"
          >
            <input type="text" />
          </Field>
        </Form>
        <button onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}

davidkpiano on 2 Jul 2016

🎉7

All 7 comments

There's an existing discussion at #285.

tomspeak on 29 Jun 2016

Yeah, I'll be creating a temporary workaround for this. It's really not good practice to be attaching ad-hoc methods on the form instance, so we'll have to think of a better way to accomplish this.

davidkpiano on 29 Jun 2016

👍2

Now there is!

class App extends React.Component {
  attachNode(node) {
    this._form = findDOMNode(node);
  }
  handleClick() {
    this._form.submit();
  }
  handleSubmit() {
    // ...
  }
  render() {
    return (
      <div>
        <Form
          model="test"
          onSubmit={this.handleSubmit.bind(this)}
          ref={this.attachNode.bind(this)}
        >
          <Field
            model="test.foo"
          >
            <input type="text" />
          </Field>
        </Form>
        <button onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}

davidkpiano on 2 Jul 2016

🎉7

Super awesome! Thanks for the quick address on the request... 👍

mewben on 3 Jul 2016

@davidkpiano This causes a refresh when I try this