display message onSubmit

[Daniyal857]

I want to display a message after submitting form. Form should be disabled after submit.

MyInput.js file

import React from 'react';
import { withFormsy } from 'formsy-react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is returned only if the component is invalid
    const errorMessage = this.props.getErrorMessage();

    return (
      <div>
        <input
          onChange={this.changeValue}
          type="text"
          value={this.props.getValue() || ''}
        />
        <span>{errorMessage}</span>
      </div>
    );
  }
}

export default withFormsy(MyInput);

App.js file

import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { 
      canSubmit:              false,
      message:                '',
    };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(data) {
    console.log(JSON.stringify(data, null, 4));
    this.setState({
        message: 'Thank you for contacting us! We will get back to you shortly.',
    });
  }

  render() {
    const message = this.state.message;
    return (
      <div>
      {
        message === '' &&
        <Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyInput
            name="text"
            title="Enter Name"
            type="text"
            validationError="Please enter your name."
            required
          />
          <MyInput
            name="email"
            validations="isEmail"
            validationError="Please enter a valid email address."
            required
          />
          <MyInput
            name="phoneNumber"
            title="Enter Phone Number"
            type="Number"
            validationError="Please enter your phone no."
            required
          />
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
        </Formsy>
      }
      {
          message !== ''  && <p className="message text-success">{message}</p>
      }
      </div>
    );
  }
}

Any suggestion.. ?

[ekv88]

My example at #51 works with displaying message on submit and validation onBlur, it's kinda hacky but it works.

[MilosRasic]

Inactive. Closing.