React.js Forms

Controlled Components vs. Uncontrolled Components

Controlled Components: In controlled components, form data is controlled by React state.

Input elements (like text inputs, checkboxes, and radio buttons) receive their current value via props and notify changes via event handlers, updating state accordingly.

Example:

                                      
                                      class ControlledForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Uncontrolled Components: In uncontrolled components, form data is handled by the DOM itself.

Also you can still use refs to access form values when needed, but React doesn't control the state of the form elements.

Example:

                                      
                                      class UncontrolledForm extends React.Component {
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
           <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Handling Form Submission

handle form submission using the onSubmit event handler on the <form> element.

Also you can then perform any necessary actions, such as sending data to a server or updating state.

Example:

                                      
                                      class MyForm extends React.Component {
  handleSubmit(event) {
    alert('Form submitted!');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Form fields */}
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Form Validation

In React form validation can be done by checking if fields values matches the certain standards like if it’s required fields, or if it meets minimum/maximum lengths.

if it has required specific patterns. Users have the possibility to then acquire input based on validation results, this can be in form of error messages appearing.

Example:

                                      
                                      class ValidationForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '', errorMessage: '' };
  }

  handleChange(event) {
    const value = event.target.value;
    let errorMessage = '';

    if (!value) {
      errorMessage = 'Name is required';
    } else if (value.length < 3) {
      errorMessage = 'Name must be at least 3 characters long';
    }

    this.setState({ value, errorMessage });
  }

  handleSubmit(event) {
    if (!this.state.value) {
      alert('Please fill in the required fields');
    } else {
      alert('Form submitted!');
    }
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={(event) => this.handleChange(event)} />
        </label>
        <span style={{ color: 'red' }}>{this.state.errorMessage}</span>
        <br />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}