Prevent Double Submit in Stateless react-form
<p>I'm a react newbie (My apologies). I'm a little stuck on this one.</p>

<p>I'm building some react components with submit buttons that make calls to a RESTful API. With a stateful component, here's how I was preventing "double submits" (essentially change the state while the request is processing)</p>

<pre><code>class Submitter extends React.Component {

  constructor(props) {
    super(props);
    this.state = { buttonDisabled: false, buttonText: 'Save' };
    this.saveQuestion = this.saveQuestion.bind(this);
  }

  saveToApi() {
    const _this = this;
    this.setState({ buttonDisabled: true, buttonText: 'Saving' });
    request((err, res) =&gt; {
      _this.setState({ buttonDisabled: false, buttonText: 'Save' });
    });
  }

  render() {
    return (&lt;div&gt;
      &lt;TextInput /&gt;
      &lt;Button 
        disabled={this.state.buttonDisabled} 
        onClick={this.saveToApi}&gt;
      {this.state.buttonText}
      &lt;/Button&gt;
    &lt;/div&gt;);
  }

}
</code></pre>

<p>This has worked great. I started to use <a href="https://github.com/tannerlinsley/react-form" rel="nofollow noreferrer">react-form</a> to do some more advanced validations, etc. However, it's a stateless component, and I'm at a loss for how to do it. I'm not using redux, but I can if I need to. Even if I was using redux, I'm not sure the general strategy about how to go about it. Here's my working login form, but it doesn't prevent the double submit. </p>

<pre><code>const LoginForm = Form({
  validate: values =&gt; {
    const { email, password } = values;
    return {
      email: (!email || !/^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)) ? 'A valid email is required' : undefined,
      password: (!password || password.length &lt; 6) ? 'Passwords must be longer than 6 characters' : undefined,
    };
  },
})(({ submitForm }) =&gt; (&lt;form onSubmit={submitForm}&gt;
    &lt;FormTextInput htmlId="email" label="Email Address" /&gt;
    &lt;FormTextInput htmlId="password" label="Password" type="password" /&gt;
    &lt;Button colored type="raised" htmlType="submit" &gt;Login&lt;/Button&gt;
  &lt;/form&gt;
  ));

export default () =&gt; (
    &lt;LoginForm
      onSubmit={(values) =&gt; {
        request((err, res) =&gt; {
          if (res.body.login) {
            history.push('/app');
          } else {
            msg.error(res.body.message);
          }
        });
      }}
    /&gt;
  );
</code></pre>