title: Prevent Double Submit in Stateless react-form
body: <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>