Submit Button

Submit

Submit is the submit button for the Form. The whole Form gets validated on the click of this button. And if the form is valid, then the onClick callback will be executed.Here is how to add submit button to your form:

import React, { Component } from 'react'
import Form, { Input, Submit } from 'react-state-form'

export default class ExampleForm extends Component {
  handleEmailChange = (event, field, setField) => {
    console.log('Email was changed!')
  }

  render() {
    const fieldDetails = {
      userName : {
        id          : 'name',
        value       : 'XXXX',
        placeholder : 'enter your name',
        label       : 'Name',
        displayName : 'User Name',
        validate    : 'required|minLength-3|maxLength-13',
      },
buttonProps = {
  displayName: "Submit Data",
  loadingText: "wait..",
  events: {
    onClick({ finishRequest, formData }) {
      const timeout = 2000;

      console.log(formData);

      window.setTimeout(() => {
        console.log("yep, I was here");
        finishRequest();
      }, timeout);
    }
  }
}
    }

    const formProps = {
      defaultClasses : {
        contClass  : 'testing',
        inputClass : 'input-test another',
        errorClass : 'error-test',
        label      : 'label-test'
      }
    }

    return (
      <div>
        <Form {...props}>
          <Input {...fieldDetails.userName} />
        </Form>
      </div>
    )
  }
}

Props Details:

displayName[String]:

displayName is a required field in Submit component. This will be the button text.

loadingClass[String]:

loadingClass is an optional field. This is a string of class(or classes) which will be added when you click on the Submit button. These classes will be automatically removed when the call finishes. See finishRequest in the example above for more details on how to finish a request.

loadingText[String]:

loadingText is an optional field. Its default value is "Loading...". This string will appear in the place of button display name when you click on the Submit button. These classes will be automatically removed when the call finishes. See finishRequest in the example above for more details on how to finish a request.

shouldUseDefaultClasses[Boolean]:

shouldUseDefaultClasses is an optional field and is set to true by default. Input will add Form level default classes if it's set to true.

events[Object]:

events is an optional field. Please pass all kinds of events(onClick, onBlur, etc.) through this object. Please refer to the example above for more details.

Please note that the onClick event has 2 special arguments -- finishRequest, formData. Here are the details:

onClick({ finishRequest, formData }) {
    const timeout = 2000;

    console.log(formData);

    window.setTimeout(() => {
      console.log("yep, I was here");
      finishRequest();
    }, timeout);
  }
}

finishRequest: If you are making an asynchronous API call, then execute the finishRequest in order to tell the Form that the request is finished. Form will remove loadingClass and loadingText from the submit button. finishRequest accepts an object as arugments. You can pass API errors(if any) in the object with property name: apiErrors. These errors will be shown below the submit button.

formData: This contains all form data like all fields data, errors.

classes{Object}:

classes is an optional property. This adds additional classes to the Submit button. Here is the shape of the classes object:

{
  buttonClass,  // This class will be added to button
  contClass     // This class will be added to the button container.
}